Set up the signalR in the Kanban control
Description
The SignalR permits bidirectional communication between the server and client. Its availability helps the server to push the content to connected clients instantly.
Steps to set up SignalR in the Kanban control
1. Create an ASP.Net MVC application in your Visual Studio.
2. Open the Tools > Library Package Manager > Package Manager Console and run the following command. This step will add a set of script files and assembly references projects that enables the SignalR functionality.
Install-package Microsoft.AspNet.SignalR
3. In Solution Explorer, expand the Scripts folder. Now, note that script libraries for SignalR have been added to the project.
4. Create a model class in models called KanbanDTO.cs.
namespace SignalR.Models
{
public class kanbanDTO
{
public int Id { set; get; }
public string Status { set; get; }
public string Summary { set; get; }
public string Type { get; set; }
public string Priority { get; set; }
public string Tags { get; set; }
public double Estimate { get; set; }
public string Assignee { get; set; }
public string Image { get; set; }
public int RankId { get; set; }
}
}
5. Right click the solution and select Add > New Item, then select the Visual C# > Web > SignalR node in the installed pane. Select the SignalR Hub Class (v2) from the center pane, and create a new hub named SignalHub.cs.
6. Replace the code in the SignalHub class with the following code.
SignalHub.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using SignalR.Models;
namespace SignalR.Hubs
{
public class SignalHub : Hub
{
public void Modify(string name, string action, kanbanDTO data)
{
Clients.Others.modify(name, action, data);
}
}
}
7. Create a new class called Startup.cs. Change the contents of the file to the following.
using Microsoft.Owin;
using Owin;
[assembly: OwinStartupAttribute(typeof(SignalR.Startup))]
namespace SignalR
{
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
//Any connection or hub wire up and configuration should come here
app.MapSignalR();
}
}
}
8. If you installed Syncfusion ASP.NET MVC NuGet packages to run the Kanban control, ensure that the following Syncfusion DLLs are properly installed.
- Syncfusion.EJ.dll
- Syncfusion.EJ.MVC.dll
- Syncfusion.Linq.Base.dll
9. In your application, you can also ensure the following assembly references are properly referred to web.config file.
<compilation debug="true" targetFramework="4.5"> <assemblies> <add assembly="Syncfusion.EJ, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <add assembly="Syncfusion.EJ.Mvc, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> <add assembly="Syncfusion.Linq.Base, Version=XX.XXXX.X.XX, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" /> </assemblies> </compilation>
10. Another web.config file is present in the Application location > Views Folder > web.config. In that, ensure the following namespaces are properly referred in your applications.
<system.web.webPages.razor> <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <pages pageBaseType="System.Web.Mvc.WebViewPage"> <namespaces> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Optimization"/> <add namespace="System.Web.Routing" /> <add namespace="SignalR" /> <add namespace="Syncfusion.JavaScript"/> <add namespace="Syncfusion.MVC.EJ"/> </namespaces> </pages> </system.web.webPages.razor>
11. In your _Layout.cshtml page, refer to the following Syncfusion themes and scripts files.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
<link href="https://cdn.syncfusion.com/16.3.0.21/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jsrender.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.syncfusion.com/16.3.0.21/js/web/ej.web.all.min.js"></script>
</head>
12. Replace the content of Index.cshtml with the following code and also refer to the SignalR scripts.
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<div class="cols-sample-area">
//Render Kanban Control
@(Html.EJ().Kanban("Kanban")
.DataSource((IEnumerable<object>)ViewBag.datasource)
.Columns(col =>
{
col.HeaderText("Backlog").Key("Open").Add();
col.HeaderText("In Progress").Key("InProgress").Add();
col.HeaderText("Testing").Key("Testing").Add();
col.HeaderText("Done").Key("Close").Add();
})
.AllowTitle(true)
.KeyField("Status")
.Fields(field =>
{
field.Content("Summary")
.PrimaryKey("Id");
})
.EditSettings(edit =>
{
edit.AllowAdding(true)
.AllowEditing(true)
.EditItems(e =>
{
e.Field("Id").Add();
e.Field("Status").EditType(KanbanEditingType.Dropdown).Add();
e.Field("Summary").EditType(KanbanEditingType.TextArea).Add();
});
}).ClientSideEvents(e => e.ActionBegin("actionBegin").CardDrop("actionbegin"))
)
<div id="sampleproperties">
<div>
<strong>Recent Change Logs (Your User Name : <span id="userName">user(new Random().Next(1000, 9999)</span>)</strong><br />
<br />
<ul id="log" style="background-color: White; display: block"></ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
//Client modified code for updating details in other browsers
window.signal = $.connection.signalHub;
window.signal.client.modify = function (userIp, action, details) {
if (!ej.isNullOrUndefined(details)) {
if (action == "delete") { //Check the Kanban action
var kanbanObj = $("#Kanban").ejKanban("instance"); //Created Kanban Object
var dm = kanbanObj.model.dataSource;
var data = dm.executeLocal(ej.Query().where("Id", ej.FilterOperators.equal, details.Id)) //Filter corresponding data
if (data.length)
$("#log").append("<li>" + ej.format(new Date(), "hh:mm:ss") + " : " + userIp + " has " + action + " a record with ID =" + details.Id + "</li>");
} else
$("#log").append("<li>" + ej.format(new Date(), "hh:mm:ss") + " : " + userIp + " has " + action + " a card with ID =" + details.Id + "</li>");
var obj = $("#Kanban").data("ejKanban");
if (action == "add")
obj.addCard(details.Id, details); //Add card public method
else if (action == "beginedit" || action == "cardDragStop")
obj.updateCard(details.Id, details); //Update card public method
else {
for (var i = 0; i < obj.model.dataSource.dataSource.json.length; i++) {
if (details.Id == obj.model.dataSource.dataSource.json[i].Id)
obj.KanbanEdit.deleteCard(details.Id); //Delete card public method
}
}
}
};
//Start the connection
$.connection.hub.start().done(function () {
window.actionbegin = function (args) {
if (args.requestType == "save" || args.requestType == "delete" || args.type == "cardDrop") {
if (args.type == "cardDrop") {
args.requestType = "cardDragStop"
if (args.data.length != 1) {
args.data = args.data.slice(args.data.length - 1);
}
//Call the modified method on the hub
window.signal.server.modify($("#userName").text(), args.requestType, args.data[0]);
}
else
window.signal.server.modify($("#userName").text(), args.requestType == "delete" ? args.requestType : window.previousAction, args.data);
}
if (args.requestType != "delete")
window.previousAction = args.requestType;
}
});
});
</script>
13. Now, save all your changes and run the project.
Chrome browser
The following screenshot illustrates a card before being dropped at a particular position and dragging the card on InProgress column into Testing column.
Firefox browser
After dragging the card in the Chrome browser, it is also reflected in Firefox browser.
Refer to Kanban SignalR sample to find the demo sample.
