How to set up SignalR with Syncfusion EJ1 Kanban control?

4 mins read

Description

The SignalR permits bi-directional communication between the server and client. Its availability helps the server to push the content to connected clients instantly. Now, let us see how to setup this SignalR in our Kanban control.

Steps to setup SignalR in our Kanban control

Create an ASP.Net MVC application in your Visual studio.
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 SignalR functionality.

 
Install-package Microsoft.AspNet.SignalR

In Solution Explorer, expand the Scripts folder. Now, note that script libraries for SignalR have been added to the project.

Script libraries for SignalR

Create a model class in models called KanbanDTO.cs.
Right click the solution and select Add -> New Item, then select the Visual C# -> Web -> SignalR node in the Installed pane. Select SignalR Hub Class (v2) from the center pane, and create a new hub named SignalHub.cs.

Replace the code in the SignalHub class with the following code.

 
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);
        }
    }
 
}

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)
        {         
            app.MapSignalR();
        }
    }
}

Then create your Controller and your view, and also add the themes and scripts references for both Syncfusion and SignalR in the Layout.cshtml.

 
<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="~/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
     <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 src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script type="text/javascript" src="~/Scripts/ej/ej.web.all.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script> //Make sure that the script reference in your code matches the version of the script library installed in your project
    <script src="signalr/hubs"></script>  //Also refer the hub in your project
 
</head>

Replace the contents of Index.cshtml with the following code.

 
<h2>Kanban</h2>
<div class="cols-sample-area">
    Select any card to Delete
    <input type="button" id="delbuttton" value="Delete Card" onclick="delClick(this)" />
    <div id="Kanban">
    </div>
    <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">
    window.kanbandata = [
        { Id: 1, Status: "Open", Summary: "Analyze new requirement gather from customer" },
        { Id: 2, Status: "Open", Summary: "API Improvements" },
        { Id: 3, Status: "InProgress", Summary: "Analyze about SP" },
        { Id: 4, Status: "Testing", Summary: "Test the Application in IE browser" },
        { Id: 5, Status: "InProgress", Summary: "Login page validation" },
        { Id: 6, Status: "Close", Summary: "Arrange web meeting with customer to get login page requirements" }
    ];
    function delClick(args) {
        var kObj = $("#Kanban").ejKanban("instance");
        var selectedcard = kObj.element.find(".e-cardselection");
        kObj.KanbanEdit.deleteCard(selectedcard.attr("id"));
    }
    $(function () {
        var data = ej.DataManager(window.kanbandata);
        $("#Kanban").ejKanban(
          {
              dataSource: data,
              actionBegin: "actionbegin",
              cardDrop: "actionbegin",
              columns: [
                  { headerText: "Backlog", key: "Open" },
                  { headerText: "In Progress", key: "InProgress" },
                  { headerText: "Testing", key: "Testing" },
                  { headerText: "Done", key: "Close" }
              ],
              keyField: "Status",
              allowTitle: true,
              fields: {
                  content: "Summary",
                  primaryKey: "Id",
 
              },
              editSettings: {
                  editMode: ej.Kanban.EditMode.Dialog,
                  editItems: [
                       { field: "Id", editType: ej.Kanban.EditingType.String, validationRules: { required: true, number: true } },
                       { field: "Status", editType: ej.Kanban.EditingType.Dropdown },
                       { field: "Summary", editType: ej.Kanban.EditingType.TextArea, validationRules: { required: true } }
                  ],
                  allowEditing: true,
                  allowAdding: true
              },
          }
      );
        window.signal = $.connection.signalHub;
        window.signal.client.modify = function (userIp, action, details) {
            if (!ej.isNullOrUndefined(details)) {
                if (action == "delete") {
                    var kanbanObj = $("#Kanban").ejKanban("instance");
                    var dm = kanbanObj.model.dataSource;
                    var data = dm.executeLocal(ej.Query().where("Id", ej.FilterOperators.equal, details.Id))
                    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);
                else if (action == "beginedit" || action == "cardDragStop")
                    obj.updateCard(details.Id, details);
                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);
                    }
                }
            }
        };
        // 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);
                        }
                        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>

Now save all and run the project.

The demo sample is also prepared and it is available in the following link:

SignalRwithKanban

Did you find this information helpful?

Yes

Comments (0)

How to set up SignalR with Syncfusion EJ1 Kanban control?

Description

Steps to setup SignalR in our Kanban control

Access denied