)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to set up SignalR with Syncfusion EJ1 Kanban control?

Platform: jQuery |
Control: ejKanban |
Published Date: December 5, 2017 |
Last Revised Date: May 27, 2019

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

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon