Data Binding

The Kanban control uses ej.DataManager which supports both RESTful JSON data services binding and local JSON array binding. The dataSource property can be assigned either with the instance of ej.DataManager or JSON data array collection. It supports different kinds of data binding methods such as

  1. Local data
  2. Remote data

Local Data

To bind local data to the Kanban, you can assign a JSON array to the dataSource property.

The JSON array to the dataSource property can also be provided as an instance of the ej.DataManager. When the JSON array is passed as an instance of ej.DataManager, the ej.JsonAdaptor will be used to manipulate the Kanban data source.

The following code example describes the above behavior.

  • html
  • <div id='Kanban'></div>
  • javascript
  • var kanbanData = [
            { Id: 1, Status: "Open", Summary: "Analyze the new requirements gathered from the customer.", Assignee: "Nancy" },
            { Id: 2, Status: "InProgress", Summary: "Improve application performance", Assignee: "Andrew" },
            { Id: 3, Status: "Open", Summary: "Arrange a web meeting with the customer to get new requirements.", Assignee: "Janet" },
            { Id: 4, Status: "InProgress", Summary: "Fix the issues reported in the IE browser.", Assignee: "Janet" },
            { Id: 5, Status: "Testing", Summary: "Fix the issues reported by the customer.", Assignee: "Steven" }
        ];
    
    /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module KanbanComponent {
        $(function () {
           var data = new ej.DataManager(window.kanbanData).executeLocal(new ej.Query().take(20));
           var sample = new ej.Kanban($("#Kanban"), {
            dataSource: kanbanData,
            columns: [
                { headerText: "Backlog", key: "Open" },
                { headerText: "In Progress", key: "InProgress" },
                { headerText: "Done", key: "Close" }
            ],
            keyField: "Status",
            fields: {
                content: "Summary",
                primaryKey: "Id"
            }
        });
     });
    }

    The following output is displayed as a result of the above code example.

    Remote Data

    To bind remote data to Kanban Control, you can assign a service data as an instance of ej.DataManager to the dataSource property.

    OData

    OData is a standardized protocol for creating and consuming data. You can provide the OData service URL directly to the ej.DataManager class and then you can assign it to Kanban dataSource.

    The following code example describes the above behavior.

  • html
  • <div id='Kanban'></div>
  • javascript
  • /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module KanbanComponent {
        $(function () {
           var data = new ej.DataManager(window.kanbanData).executeLocal(new ej.Query().take(20));
           var sample = new ej.Kanban($("#Kanban"), {
                dataSource: kanbanData,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                   { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    content: "Summary",
                    primaryKey: "Id"
                }
            });
        });
    }

    The following output is displayed as a result of the above code example.