ejKanban

The Kanban can be easily configured to the DOM element, such as div. You can create a Kanban with a highly customizable look and feel.

Syntax

  • js
  • $(element).ejKanban();

    Example

  • html
  • <div id="Kanban"></div>
        <script>
        window.kanban = [
                { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                { Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
                { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        // Create Kanban
        $("#Kanban").ejKanban({
            dataSource: window.kanban,
            keyField:"Status",
            columns: [
                { headerText: "Backlog", key: "Open" },
                { headerText: "In Progress", key: "InProgress" },
                { headerText: "Testing", key: "Testing" },
                { headerText: "Done", key: "Close" }
            ]
        });
        </script>

    Requires

    • module:jQuery
    • module:jsrender.min.js
    • module:ej.globalize.min.js
    • module:ej.core.min.js
    • module:ej.data.min.js
    • module:ej.touch.min.js
    • module:ej.draggable.min.js
    • module:ej.kanban.min.js
    • module:ej.scroller.min.js
    • module:ej.waitingpopup.min.js
    • module:ej.button.min.js
    • module:ej.dialog.min.js
    • module:ej.dropdownlist.min.js
    • module:ej.datepicker.min.js
    • module:ej.datetimepicker.min.js
    • module:ej.editor.min.js
    • module:ej.checkbox.min.js
    • module:ej.tab.min.js
    • module:ej.splitbutton.js
    • module:ej.rte.min.js
    • module:ej.toolbar.min.js
    • module:ej.menu.min.js

    Members

    allowDragAndDrop boolean

    Gets or sets a value that indicates whether to enable allowDragAndDrop behavior on Kanban.

    Default Value

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
            });
        });
        </script>

    allowExternalDragAndDrop boolean

    Gets or sets a value that indicates whether to enable drag and drop behavior between Kanban controls.

    Default Value

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowExternalDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
            });
        });
        </script>

    allowTitle boolean

    To enable or disable the title of the card.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                allowTitle: true,
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
            });
        });
        </script>

    swimlaneSettings Object

    Customize the settings for swim lane.

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    swimlaneKey: "Assignee",
                    content: "Summary",
                },
                swimlaneSettings: {
                    showCount: true
                },
            });
        });
        </script>

    swimlaneSettings.showCount boolean

    To enable or disable items count in swim lane.

    Default Value:

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    swimlaneKey: "Assignee",
                    content: "Summary",
                },
                swimlaneSettings: {
                    showCount: true
                },
            });
        });
        </script>

    swimlaneSettings.allowDragAndDrop boolean

    To enable or disable DragAndDrop across swim lane.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
    				swimlaneKey: "Assignee",
                    content: "Summary",
                },
    			swimlaneSettings:{
    					     allowDragAndDrop: true,
    				    },
            });
        });
        </script>

    swimlaneSettings.showEmptySwimlane boolean

    To enable or disable empty swimlane on Kanban board. It is used to shown empty swimlane when no data’s present on headers key mapping value.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
    				swimlaneKey: "Assignee",
                    content: "Summary",
                },
    			swimlaneSettings:{
    				showEmptySwimlane: true,
                    headers: [{ text: 'Andrew Fuller', key: 'Andrew' },
    						 { text: 'Janet', key: 'Janet' }]
    				},
            });
        });
        </script>

    swimlaneSettings.headers Array

    Gets or sets an object that indicates to render the swimlane rows with specified swimlane headers.

    Default Value:

    • []

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
    				swimlaneKey: "Assignee",
                    content: "Summary",
                },
    			swimlaneSettings:{
    				showEmptySwimlane: true,
                    headers: [{ text: 'Andrew Fuller', key: 'Andrew' },
    						 { text: 'Janet', key: 'Janet' }]
    				},
            });
        });
        </script>

    swimlaneSettings.headers.text string

    Gets or sets a value that indicates to render the Kanban with specified swimlane header text.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
    				swimlaneKey: "Assignee",
                    content: "Summary",
                },
    			swimlaneSettings:{
    				showEmptySwimlane: true,
                    headers: [{ text: 'Andrew Fuller', key: 'Andrew' },
    						 { text: 'Janet', key: 'Janet' }]
    				},
            });
        });
        </script>

    swimlaneSettings.headers.key string

    Gets or sets a value that indicates to render the Kanban with specified swimlane header key.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
    				swimlaneKey: "Assignee",
                    content: "Summary",
                },
    			swimlaneSettings:{
    				showEmptySwimlane: true,
                    headers: [{ text: 'Andrew Fuller', key: 'Andrew' },
    						 { text: 'Janet', key: 'Janet' }]
    				},
            });
        });
        </script>

    swimlaneSettings.unassignedGroup Object

    Customize the settings for unassigned category of swim lane.

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
    				swimlaneKey: "Assignee",
                    content: "Summary",
                },
    			swimlaneSettings:{
                    unassignedGroup:{
    					enable:true
    				}		
    		    },
            });
        });
        </script>

    swimlaneSettings.unassignedGroup.enable boolean

    To enable or disable unassigned category change with swim lane key values.

    Default Value:

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
    				swimlaneKey: "Assignee",
                    content: "Summary",
                },
    			swimlaneSettings:{
                    unassignedGroup:{
    					enable:true
    				}		
    		    },
            });
        });
        </script>

    swimlaneSettings.unassignedGroup.keys Array

    To set the user defined values which are need to categorized as unassigned category swim lane groups.

    Default Value:

    • [“null”,”undefined”,””]

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                allowDragAndDrop: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
    				swimlaneKey: "Assignee",
                    content: "Summary",
                },
    			swimlaneSettings:{
                    unassignedGroup:{
    					enable:true,
    					keys:["",null],
    				}		
    		    },
            });
        });
        </script>

    allowToggleColumn boolean

    To enable or disable the column expand /collapse.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    allowToggleColumn: true,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary",
                    },
                });
        });
        </script>

    allowSearching boolean

    To enable Searching operation in Kanban.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" },
                         { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary",
                    },
                    allowSearching: true,
                });
        });
        </script>

    allowFiltering boolean

    To enable filtering behavior on Kanban.User can specify query in filterSettings collection after enabling allowFiltering.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Janet" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                    {
                        dataSource: data,
    					isResponsive:true,
                        columns: [
                            { headerText: "Backlog", key: "Open" },
                            { headerText: "In Progress", key: "InProgress" },
                            { headerText: "Testing", key: "Testing" },
                            { headerText: "Done", key: "Close" }
                        ],      
                        allowTitle: true,		
                        allowFiltering:true,		
                        keyField: "Status",
                        filterSettings: [
                             { text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet Leverling'" },
                             { text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
                        ],
    					fields: {
    					     primaryKey: "Id",
    					     content: "Summary",
    					     imageUrl: "ImgUrl"
    			         }, 
                  });
        });
        </script>

    allowSelection boolean

    Gets or sets a value that indicates whether to enable allowSelection behavior on Kanban.User can select card and the selected card will be highlighted on Kanban.

    Default Value:

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                allowSelection: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
            });
        });
        </script>

    allowHover boolean

    Gets or sets a value that indicates whether to allow card hover actions.

    Default Value

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                allowHover: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
            });
        });
        </script>

    allowKeyboardNavigation boolean

    To allow keyboard navigation actions.

    Default Value

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    allowKeyboardNavigation: true,
                    columns: [
                            { headerText: "Backlog", key: "Open"},
                            { headerText: "In Progress", key: "InProgress"},
                            { headerText: "Testing", key: "Testing"},
                            { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        content: "Summary",
                        primaryKey: "Id"
                    },
                });       
        });
        </script>

    allowScrolling boolean

    Gets or sets a value that indicates whether to enable the scrollbar in the Kanban and view the card by scroll through the Kanban manually.

    Default Value

    • false

    Example

  • html
  • <div id="kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
           { Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
           { Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Done", key: "Close" }
                    ],
                    fields: {
                        primaryKey: "Id",
                        swimlaneKey: "Assignee",
                        content: "Summary",
                    },
                    keyField: "Status",
                    allowScrolling: true,
                    scrollSettings: {
                        height: 400,
                        width: 700
                    }
                }
            );
        });
        </script>

    allowPrinting boolean

    Gets or sets a value that indicates whether to enable printing option.

    Default Value:

    • false

    Example

  • html
  • <div id="kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Done", key: "Close" }
                    ],
                    fields: {
                        primaryKey: "Id",
                        content: "Summary",
                    },
                    keyField: "Status",
                    allowPrinting: true,
                }
            );
        });
        </script>

    contextMenuSettings Object

    Gets or sets an object that indicates whether to customize the context menu behavior of the Kanban.

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
        { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
        { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
        { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
        { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
        { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }    
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",                
                    content: "Summary"
                },
                contextMenuSettings: {
                    enable: true,
    
                }
            });
        });
        </script>

    contextMenuSettings.enable boolean

    To enable context menu.All default context menu will show.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
         { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
         { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
         { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
         { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
         { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }     
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary"
                },
                contextMenuSettings: {
                    enable: true
                }
            });
        });
        </script>

    contextMenuSettings.disableDefaultItems Array

    Gets or sets a value that indicates the list of items needs to be disable from default context menu items.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
            { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }        
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",                
                    content: "Summary"
                },
                contextMenuSettings: {
                    enable: true,
                    disableDefaultItems: [ej.Kanban.MenuItem.MoveLeft]
                }
            });
        });
        </script>

    contextMenuSettings.menuItems Array

    Its used to add specific default context menu items.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,		
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",        
                fields: {
                    primaryKey: "Id",            
                    content: "Summary"
                },
                contextMenuSettings: {
                    enable: true,
                    menuItems:["Move Right","Move Left"],
                }
            });
        });
        </script>

    contextMenuSettings.customMenuItems Array

    Gets or sets a value that indicates whether to add custom contextMenu items.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary"
                },
                contextMenuSettings: {
                    enable: true,
                    customMenuItems: [
                              { text: "Menu1" },
                              { text: "Menu2", target: ej.Kanban.Target.Header }                          
                    ],
                }
            });
        });
        </script>

    contextMenuSettings.customMenuItems.target enum

    Its sets target element to custom context menu item.

    Name Description
    Header Sets context menu to Kanban header
    Content Sets context menu to Kanban content
    Card Sets context menu to Kanban card
    All Sets context menu to Kanban

    Default Value

    • ej.Kanban.Target.All

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary"
                },
                contextMenuSettings: {
                    enable: true,
                    customMenuItems: [
                              { text: "Menu1", target: ej.Kanban.Target.Card },
                              { text: "Menu2", target: ej.Kanban.Target.Header }
                    ],
                }
            });
        });
        </script>

    contextMenuSettings.customMenuItems.text string

    Gets the display name to custom menu item.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary"
                },
                contextMenuSettings: {
                    enable: true,
                    customMenuItems: [
                              { text: "Menu1" },
                              { text: "Menu2" }
                    ]
                }
            });
        });
        </script>

    contextMenuSettings.customMenuItems.template string

    Gets the template to render custom context menu item.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <ul id="template">
            <li><a>Backlog</a></li>
            <li><a>Testing</a></li>        
        </ul>    
        <script type="text/javascript">
            window.kanban = [
                 { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                 { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                 { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
                 { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
                 { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
            ];
            $(function () {
                var data = ej.DataManager(window.kanban);
                $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        swimlaneKey: "Assignee",
                        content: "Summary",
                    },
                    contextMenuSettings: {
                        enable: true,
                        customMenuItems: [
                                  { text: "Hide Column", template: "#template" },
                        ],
                    }
                });
            });
        </script>

    columns Array

    Gets or sets an object that indicates to render the Kanban with specified columns.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
            { Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
            { Id: 6, Status: "Testing", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
                keyField: "Status"
            }
        );
        });
        </script>

    columns.headerText string

    Gets or sets an object that indicates to render the Kanban with specified columns header text.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
                keyField: "Status"
            }
        );
        });
        </script>

    columns.totalCount Object

    To customize the totalCount properties.

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    enableTotalCount: true,
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open",totalCount:{text:"OpenCount"}},
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    }
                });
        });
        </script>

    columns.totalCount.text string

    To customize the totalCount text properties.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    enableTotalCount: true,
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open",totalCount:{text:"Backlog Count"}},
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    }
                });
        });
        </script>

    columns.key string/number

    Gets or sets an object that indicates to render the Kanban with specified columns key.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
                keyField: "Status"
            }
        );
        });
        </script>

    columns.allowDrop boolean

    To enable/disable allowDrop for specific column wise.

    Default Value

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
    	window.kanbanPizzaData=[
    	{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
    	{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
    	{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
    	{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
    	{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
    	]
            $(function() {
                var data = ej.DataManager(window.kanbanPizzaData)
                $("#Kanban").ejKanban(
                    {
                        dataSource: data,
    					workflows:[
    					{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
    					{key:"Ready to Serve",allowedTransitions:"Served"},
    					{key:"Ready to Deliver",allowedTransitions:"Delivered"}
    					],
    					enableTotalCount:true,
    					allowToggleColumn:true,
                        columns: [
                            { headerText: "Order", key: "Order",allowDrop:false},
                            { headerText: "Ready to Serve", key: "Ready to Serve"},
                            { headerText: "Home Delivery", key: "Ready to Deliver" },
    						{ headerText: "Served or Delivered", key: "Delivered,Served"}
                        ],   
                        keyField: "Category",
    					allowTitle: true,
    					fields: {
    					    content: "Description",
    					    primaryKey: "Id",
    						title:"Title",
    						color: "Size",
    					    imageUrl: "ImageURL"
    					},
    					  
                    });
            });
        </script>

    columns.allowDrag boolean

    To enable/disable allowDrag for specific column wise.

    Default Value

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
    	window.kanbanPizzaData=[
    	{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
    	{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
    	{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
    	{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
    	{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
    	]
            $(function() {
                var data = ej.DataManager(window.kanbanPizzaData)
                $("#Kanban").ejKanban(
                    {
                        dataSource: data,
    					workflows:[
    					{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
    					{key:"Ready to Serve",allowedTransitions:"Served"},
    					{key:"Ready to Deliver",allowedTransitions:"Delivered"}
    					],
    					enableTotalCount:true,
    					allowToggleColumn:true,
                        columns: [
                            { headerText: "Order", key: "Order"},
                            { headerText: "Ready to Serve", key: "Ready to Serve"},
                            { headerText: "Home Delivery", key: "Ready to Deliver" },
    						{ headerText: "Served or Delivered", key: "Delivered,Served",allowDrag:false }
                        ],   
                        keyField: "Category",
    					allowTitle: true,
    					fields: {
    					    content: "Description",
    					    primaryKey: "Id",
    						title:"Title",
    						color: "Size",
    					    imageUrl: "ImageURL"
    					},
    					  
                    });
            });
        </script>

    columns.isCollapsed boolean

    To set column collapse or expand state

    Default Value

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    allowToggleColumn: true,
                    columns: [
                            { headerText: "Backlog", key: "Open" },
                            { headerText: "In Progress", key: "InProgress" },
                            { headerText: "Testing", key: "Testing", isCollapsed: true }                        
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                });
        });
        </script>

    columns.constraints Object

    To customize the column level constraints with minimum ,maximum limit validation.

    Default Value

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Done", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    enableTotalCount: true,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress", constraints: { min: 1, max: 2 }, },
                         { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    allowTitle: true,
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    }               
                });        
         });
        </script>

    columns.constraints.type string

    It is used to specify the type of constraints as column or swimlane.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress", constraints: { type: ej.Kanban.Type.Swimlane, min: 1, max: 2 }, },
                         { headerText: "Testing", key: "Testing", constraints: { type: ej.Kanban.Type.Column, max: 2 }, },
                         { headerText: "Done", key: "Close" },
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    },
                }
            );
        });
        </script>

    columns.constraints.min number

    It is used to specify the minimum amount of card in particular column cell or swimlane cell can hold.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
    
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress", constraints: { type: ej.Kanban.Type.Swimlane, min: 1, max: 2 }, },
                         { headerText: "Testing", key: "Testing", constraints: { type: ej.Kanban.Type.Column, max: 2 }, },
                         { headerText: "Done", key: "Close" },
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                }
            );
        });
        </script>

    columns.constraints.max number

    It is used to specify the maximum amount of card in particular column cell or swimlane cell can hold.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress", constraints: { type: ej.Kanban.Type.Swimlane, min: 1, max: 2 }, },
                         { headerText: "Testing", key: "Testing", constraints: { type: ej.Kanban.Type.Column, max: 2 }, },
                         { headerText: "Done", key: "Close" },
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    },
                }
            );
        });
        </script>

    columns.headerTemplate string

    Gets or sets a value that indicates to add the template within the header element.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <div id="calender">
        <span class="e-calender e-icon headericon"></span>
        In Progress
        </div>
        <div id="login">
        <span class="e-userlogin e-icon employee"></span>
        Testing
        </div>
        <div id="image">
        <img src="themes/images/kanban/9.png">
        Done
        </div>  
        <style type="text/css">
        img {
            height: 14px;
            width: 14px;
        }
        </style>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" },
           { Id: 3, Status: "Close", Summary: "Task 3", Assignee: "Andrew" },
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress", headerTemplate: "#calender" },
                        { headerText: "Testing", key: "Testing", headerTemplate: "#login" },
                        { headerText: "Done", key: "Close", headerTemplate: "#image" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                });
        });
        </script>

    columns.width string/number

    Gets or sets an object that indicates to render the Kanban with specified columns width.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open", width: 200 },
                    { headerText: "Validated", key: "Validate", width: 200 },           
                    { headerText: "Testing", key: "Testing", width: 200 },
                    { headerText: "Done", key: "Close", width: 200 }
                ],
                fields: {
                    primaryKey: "Id",
                    content: "Summary"
                },
                keyField: "Status"
            }
        );
        });
        </script>

    columns.visible boolean

    Gets or sets an object that indicates to set specific column visibility.

    Default Value:

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
                        { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                        { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                        { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
                        { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
                        { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing", visible: false },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary"
                },
            }
        );
        });
        </script>

    columns.showAddButton boolean

    Gets or sets an object that indicates whether to show add new button.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
                        { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                        { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                        { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
                        { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
                        { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open", showAddButton: true },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"                    
                    },
                    editSettings: {
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String, validationRules: { required: true, number: true } },
                            { field: "Status", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea, validationRules: { required: true } }
                        ],
                        allowEditing: true,
                        allowAdding: true
                    },
                });
        });
        </script>

    cardSettings Object

    Gets or sets an object that indicates whether to Customize the card settings.

    Default Value

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
            { Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew", Type: "Improvement" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Type: "Issue", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary",
                        color: "Type",
                    },
                    cardSettings: {                    
                        colorMapping: {
                            "#cb2027": "Issue,Story",
                            "#67ab47": "Improvement",
                            "#fbae19": "Epic",
                            "#6a5da8": "UG"
                        }
                    }
                });
        });
        </script>

    cardSettings.template string

    Gets or sets a value that indicates to add the template for card .

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script id="template" type="text/x-jsrender">
        <table>
            <tr>
                <td class="photo">
                    <img src="../themes/images/kanban/.png">
                </td>
                <td class="details">
                    <table>
                        <colgroup>
                            <col width="30%">
                            <col width="70%">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td class="CardHeader">Name: </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="CardHeader">Task: </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
        </script>
        <style type="text/css">
            .details > table {
                margin-left: 10px;
                border-collapse: separate;
                border-spacing: 7px;
                width: 100%;
            }
            .photo {
                padding-left: 6px;
            }
            .CardHeader {
                font-weight: bolder;
            }
        </style>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
            { Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew", Type: "Improvement" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Type: "Issue", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    cardSettings: {
                        template: "#template",
                    }
                });
        });
        </script>

    cardSettings.colorMapping Object

    To customize the card border color based on assigned task. Colors and corresponding values defined here will be mapped with colorField mapped data source column.

    Default Value

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
            { Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew", Type: "Improvement" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Type: "Issue", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary",
                        color: "Type",
                    },
                    cardSettings: {
                        colorMapping: {
                            "#cb2027": "Issue,Story",
                            "#67ab47": "Improvement",
                            "#fbae19": "Epic",
                            "#6a5da8": "UG"
                        }
                    },
    
                });
        });
        </script>

    cardSettings.externalDropTarget string

    This specifies the Kanban card to drop into particular target element.

    Default Value

    • ””

    Example

  • html
  • <div id="Kanban"></div>
        <div id="DroppedKanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
            { Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew", Type: "Improvement" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
        ];
        window.droppedKanban=[
                     { Status: "Open", Id: "8", Summary: "Fix the issues reported in safari browser."},
                     { Status: "InProgress", Id: "10", Summary: "Arrange a web meeting with the customer to get the login page requirements." },
                     { Status: "Close", Id: "11", Summary: "Login page validation."},
            ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            var droppedData = ej.DataManager(window.droppedKanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    allowExternalDragAndDrop: true,
    			    cardSettings:{
    				    externalDropTarget: "#DroppedKanban"
    				},
                });
                $("#DroppedKanban").ejKanban(
                    {
                        dataSource: droppedData,
                        columns: [
                            { headerText: "Backlog", key: "Open" },
                            { headerText: "In Progress", key: "InProgress" },
                            { headerText: "Done", key: "Close" }
                        ],                                                           			
                        keyField: "Status",
    					allowTitle: true,
    					fields: {
    					    content: "Summary",
    					    primaryKey: "Id"
    					},
                    });
        });
        </script>

    customToolbarItems Array

    Gets or sets a value that indicates whether to add customToolbarItems within the toolbar to perform any action in the Kanban.

    Default Value:

    • []

    Example

  • html
  • <div id="Kanban"></div>
        <script id="Delete" type="text/x-jsrender">
            <a class="e-customdelete  e-icon" />
        </script>
        <style type="text/css" class="cssStyles">
            .e-customdelete:before {
                content: "\e800";
                line-height: 26px;
                min-height: 26px;
                min-width: 14px;
                display: inline-block;
            }
        </style>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    customToolbarItems: [
                          {
                              template: "#Delete"
                          }
                    ],                
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"                  
                    },
                    toolbarClick: function (args) {
                        if (args.itemName == "Delete" && this.element.find(".e-kanbancard").hasClass("e-cardselection")) {
                            var selected = this.element.find(".e-cardselection");
                            this.KanbanEdit.deleteCard(selected.attr("id"));
                        }
                    }
                });
        });
        </script>

    customToolbarItems.template string

    Gets the template to render customToolbarItems.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script id="Delete" type="text/x-jsrender">
            <a class="e-customdelete  e-icon" />
        </script>
        <style type="text/css" class="cssStyles">
        .e-customdelete:before {
            content: "\e800";
            line-height: 26px;
            min-height: 26px;
            min-width: 14px;
            display: inline-block;
        }
        </style>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    customToolbarItems: [
                          {
                              template: "#Delete"
                          }
                    ],                
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    toolbarClick: function (args) {
                        if (args.itemName == "Delete" && this.element.find(".e-kanbancard").hasClass("e-cardselection")) {
                            var selected = this.element.find(".e-cardselection");
                            this.KanbanEdit.deleteCard(selected.attr("id"));
                        }
                    }
                });
        });
        </script>

    cssClass string

    Gets or sets a value that indicates to render the Kanban with custom theme.

    Default Value:

    • ””

    Example

  • html
  • <div id="Kanban"></div>
        <style type="text/css">
            .gradient-green {
                font-family: cursive;
            }
            .gradient-green .e-swimlanerow {
                background: none repeat scroll 0 0 #71A409;
            }
        </style>
        <script>
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
            {
                dataSource: data,
                cssClass: "gradient-green",
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" }
                ],
                fields: {
                    primaryKey: "Id",
                    content: "Summary"
                },
                keyField: "Status"
            }
        );
        });
        </script>

    dataSource Object

    Gets or sets the data to render the Kanban with cards.

    Default Value:

    • null

    Example

  • html
  • <div id="kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" }
                ],
                fields: {
                    primaryKey: "Id",                
                    content: "Summary"
                },
                keyField: "Status"
            }
        );
        });
        </script>

    enableTouch boolean

    To perform kanban functionalities with touch interaction.

    Default Value:

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    enableTouch:false,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary",
                    }
                });
        });
        </script>

    enableRTL boolean

    Align content in the Kanban control align from right to left by setting the property as true.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    enableRTL: true,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    }                
                });
        });
        </script>

    enableTotalCount boolean

    To show total count of cards in each column.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    enableTotalCount: true,
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    }
                });
        });
        </script>

    editSettings Object

    Get or sets an object that indicates whether to customize the editing behavior of the Kanban.

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    actionComplete: "complete",
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }
                        ],
                        allowEditing: true,
                        allowAdding: true
                    }
                }
            );
        });
        </script>

    editSettings.allowEditing boolean

    Gets or sets a value that indicates whether to enable the editing action in cards of Kanban.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    actionComplete: "complete",
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }
                        ],
                        allowEditing: true
                    }
                }
            );
        });
        </script>

    editSettings.allowAdding boolean

    Gets or sets a value that indicates whether to enable the adding action in cards behavior on Kanban.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    actionComplete: "complete",
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }
                        ],
                        allowAdding: true
                    }
                }
            );
        });
        </script>

    editSettings.dialogTemplate string

    This specifies the id of the template which is require to be edited using the Dialog Box.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script id="template" type="text/template">
        <table>
            <tr>
                <td style="text-align: right;">Id
                </td>
                <td style="text-align: left">
                    <input id="Id" name="Id" value="" class="e-field e-ejinputtext valid e-disable" disabled="disabled" />
                </td>
                <td style="text-align: right;">Status
                </td>
                <td style="text-align: left">
                    <input id="Status" name="Status" value="" class="e-field e-ejinputtext valid" />
                </td>
            </tr>
        </table>
        </script>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
            { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editMode: ej.Kanban.EditMode.DialogTemplate,
                        dialogTemplate: "#template",
                        allowEditing: true,
                        allowAdding: true
                    },
                }
              );
        })
        </script>

    editSettings.editMode enum

    Get or sets an object that indicates whether to customize the editMode of the Kanban.

    Name Description
    Dialog Creates Kanban with editMode as Dialog
    DialogTemplate Creates Kanban with editMode as DialogTemplate
    ExternalForm Creates Kanban with editMode as ExternalForm
    ExternalFormTemplate Creates Kanban with editMode as ExternalFormTemplate

    Default Value:

    • ej.Kanban.EditMode.Dialog

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
            { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary",
                    },
                    editSettings: {
                        editMode: ej.Kanban.EditMode.Dialog,
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.String },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
                        allowEditing: true,
                        allowAdding: true
                    },
                }
              );
        })
        </script>

    editSettings.editItems Array

    Get or sets an object that indicates whether to customize the editing fields of Kanban card.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
            { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editMode: ej.Kanban.EditMode.Dialog,
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.String },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
                        allowEditing: true,
                        allowAdding: true
                    }
                }
              );
        })
        </script>

    editSettings.editItems.field string

    It is used to map editing field from the data source.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
            { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editMode: ej.Kanban.EditMode.Dialog,
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.String },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
                        allowEditing: true,
                        allowAdding: true
                    }
                }
              );
        })
        </script>

    editSettings.editItems.editType enum

    It is used to set the particular editType in the card for editing.

    Name Description
    String Allows to set edit type as string edit type
    Numeric Allows to set edit type as numeric edit type
    Dropdown Allows to set edit type as drop down edit type
    DatePicker Allows to set edit type as date picker edit type
    DateTimePicker Allows to set edit type as date time picker edit type
    TextArea Allows to set edit type as text area edit type
    RTE Allows to set edit type as RTE edit type

    Default Value:

    • ej.Kanban.EditingType.String

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
            { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editMode: ej.Kanban.EditMode.Dialog,
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.String },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
                        allowEditing: true,
                        allowAdding: true
                    }
                }
              );
        })
        </script>

    editSettings.editItems.validationRules Object

    Gets or sets a value that indicates to define constraints for saving data to the database.

    Default Value

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
            { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    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: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                                    { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] } },
                                    { field: "Summary", editType: ej.Kanban.EditingType.TextArea, validationRules: { required: true } }
                        ],
                        allowEditing: true,
                        allowAdding: true
                    }
                }
              );
        })
        </script>

    editSettings.editItems.editParams Object

    It is used to set the particular editparams in the card for editing.

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    actionComplete: "complete",
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {                    
                        editMode: ej.Kanban.EditMode.Dialog,
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.String },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
                        allowEditing: true,
                        allowAdding: true
                    }
                }
            );
        })
        </script>

    editSettings.editItems.defaultValue string/number

    It is used to specify defaultValue for the fields while adding new card.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,                
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    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.String, defaultValue: "Open" },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea, validationRules: { required: true } }],
                        allowEditing: true,
                        allowAdding: true
                    }
                }
            );
        })
        </script>

    editSettings.externalFormTemplate string

    This specifies the id of the template which is require to be edited using the External edit form.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script id="template" type="text/template">
        <table>
            <tr>
                <td style="text-align: right;">Id
                </td>
                <td style="text-align: left">
                    <input id="Id" name="Id" value="" class="e-field e-ejinputtext valid e-disable" disabled="disabled" />
                </td>
                <td style="text-align: right;">Status
                </td>
                <td style="text-align: left">
                    <input id="Status" name="Status" value="" class="e-field e-ejinputtext valid" />
                </td>
            </tr>
        </table>
        </script>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
            { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editMode: ej.Kanban.EditMode.ExternalFormTemplate,
                        externalFormTemplate: "#template",
                        allowEditing: true,
                        allowAdding: true
                    }
                }
              );
        })
        </script>

    editSettings.formPosition enum

    This specifies to set the position of an External edit form either in the right or bottom of the Kanban.

    Default Value:

    • ej.Kanban.FormPosition.Bottom
    Name Description
    Bottom Form position is bottom.
    Right Form position is right.

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
            { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
            { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban)
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    editSettings: {
                        editMode: ej.Kanban.EditMode.ExternalForm,
                        formPosition: ej.Kanban.FormPosition.Bottom,
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.String },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
                        allowEditing: true,
                        allowAdding: true
                    }
                }
              );
        })
        </script>

    fields Object

    To customize field mappings for card , editing title and control key parameters

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG", Tags: "Analyze,Requirements", ImgUrl: "../themes/images/kanban/1.png" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Type: "Issue", Tags: "Improvement,Performance", ImgUrl: "../themes/images/kanban/2.png" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Type: "Improvement", Tags: "Improvement,Performance", ImgUrl: "../themes/images/kanban/2.png" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Type: "UG", Tags: "Analyze,Requirements", ImgUrl: "../themes/images/kanban/1.png" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Janet", Type: "Epic", Tags: "Meeting,Requirements", ImgUrl: "../themes/images/kanban/3.png" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    swimlaneKey: "Assignee",
                    content: "Summary",
                    tag: "Tags",
                    title: "Id",
                    color: "Type",
                    imageUrl: "ImgUrl",
                },
                cardSettings: {
                    colorMapping: {
                        "#cb2027": "Issue,Story",
                        "#67ab47": "Improvement",
                        "#fbae19": "Epic",
                        "#6a5da8": "UG"
                    }
                }
            });
        });
        </script>

    fields.primaryKey string

    The primarykey field is mapped to data source field. And this will used for Drag and drop and editing mainly.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary"
                },
            });
        });
        </script>

    fields.swimlaneKey string

    To enable swimlane grouping based on the given key field from datasource mapping.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    swimlaneKey: "Assignee",
                    content: "Summary"
                }
            });
        });
        </script>

    fields.priority string

    Priority field has been mapped data source field to maintain cards priority.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", RankId: 1 },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", RankId: 2 },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", RankId: 2 },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", RankId: 1 },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", RankId: 3 }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    priority: "RankId",
                    content: "Summary"
                }
            });
        });
        </script>

    fields.content string

    Content field has been Mapped into card text.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
            });
        });
        </script>

    fields.tag string

    Tag field has been Mapped into card tag.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                    tag: "Tags"
                }
            });
        });
        </script>

    fields.title string

    Title field has been Mapped to field in datasource for title content. If title field specified , card expand/collapse will be enabled with header and content section.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                    title: "Assignee"
                }
            });
        });
        </script>

    fields.color string

    To customize the card has been Mapped into card color field.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Type: "Issue" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Type: "Improvement" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Type: "UG" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Janet", Type: "Epic" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                    color: "Type"
                },
                cardSettings: {
                    colorMapping: {
                        "#cb2027": "Issue,Story",
                        "#67ab47": "Improvement",
                        "#fbae19": "Epic",
                        "#6a5da8": "UG"
                    }
                }
            });
        });
        </script>

    fields.imageUrl string

    ImageUrl field has been Mapped into card image.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", ImgUrl: "../themes/images/kanban/1.png" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", ImgUrl: "../themes/images/kanban/2.png" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", ImgUrl: "../themes/images/kanban/2.png" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", ImgUrl: "../themes/images/kanban/1.png" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Janet", ImgUrl: "../themes/images/kanban/3.png" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                    imageUrl: "ImgUrl"
                }
            });
        });
        </script>

    fields.collapsibleCards Object

    Get or sets an object that indicates the options to map the cards to the collapsible area.

    Default Value

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Close", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary",
                        collapsibleCards: { field: "Status", key: "Close" }
                    }               
                });        
         });
        </script>

    fields.collapsibleCards.field string

    It is used to specify the collapsible card’s field mapping.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" },
                         { headerText: "Done", key: "Close" },
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary",
                        collapsibleCards: { field: "Status", key: "Close" }
                    },
                }
            );
        });
        </script>

    fields.collapsibleCards.key string

    It is used to specify the collapsible card’s key mapping which is available in datasource value of field mapped in collapsibleCards.field.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" },
                         { headerText: "Done", key: "Close" },
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary",
                        collapsibleCards: { field: "Status", key: "Close" }
                    },
                }
            );
        });
        </script>

    keyField string

    To map datasource field for column values mapping

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        content: "Summary"
                    }
                });
        });
        </script>

    isResponsive boolean

    When set to true, adapts the Kanban layout to fit the screen size of devices on which it renders.

    Default Value:

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,                
                    isResponsive: true,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    }
                });
        });
        </script>

    minWidth number

    Gets or sets a value that indicates whether to set the minimum width of the responsive Kanban while isResponsive property is true.

    Default Value:

    • 0

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
             { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
             { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
             { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
             { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
             { Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    minWidth: 400,
                    isResponsive: true,
                    columns: [
                        { headerText: "Backlog", key: "Open", width: 150 },
                        { headerText: "In Progress", key: "InProgress", width: 120 },
                        { headerText: "Testing", key: "Testing", width: 120 },
                        { headerText: "Done", key: "Close", width: 150 }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    }
                });
        });
        </script>

    filterSettings Array

    To customize the filtering behavior based on queries given.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
               { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
               { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
               { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
               { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Janet" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    allowFiltering:true,
                    filterSettings: [
                             { text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet'" },
                             { text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
                    ],
                }
            );
        });
        </script>

    filterSettings.text string

    Gets or sets an object of display name to filter queries.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
               { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
               { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
               { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
               { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Janet" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    filterSettings: [
                             { text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet'" },
                             { text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
                    ],
                }
            );
        });
        </script>

    filterSettings.query Object

    Gets or sets an object that Queries to perform filtering

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
               { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
               { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
               { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
               { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Janet" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    filterSettings: [
                             { text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet'" },
                             { text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
                    ],
                }
            );
        });
        </script>

    filterSettings.description string

    Gets or sets an object of tooltip to filter buttons.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
               { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
               { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
               { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
               { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Janet" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" },
                        { headerText: "Done", key: "Close" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    filterSettings: [
                             { text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet'" },
                             { text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
                    ],
                }
            );
        });
        </script>

    query Object

    ej Query to query database of Kanban.

    Default Value:

    • null

    Example

  • html
  • <div id="kanban"></div>
        <script type="text/javascript">
        window.kanban = [
         { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
         { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
         { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" }
        ];
        $(function () {
            var query = ej.Query().select(["Status", "Id", "Summary"]);
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    keyField: "Status",
                    query: query,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" }
                    ],
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                }
            );
        });
        </script>

    keySettings Object

    To change the key in keyboard interaction to Kanban control.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
               { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
               { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
               { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
               { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    allowKeyboardNavigation: true,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }                    
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    selectionType: "multiple",
                    editSettings: {
                        editItems: [
                            { field: "Id", editType: ej.Kanban.EditingType.String },
                            { field: "Status", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
                            { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
                            { field: "Summary", editType: ej.Kanban.EditingType.TextArea }
                        ],
                        allowEditing: true,
                        allowAdding: true
                    },
                    keySettings: {
                        focus: "e",
                        insertCard: "45",
                    },
                });
            $(document).on("keydown", function (e) {
                if (e.altKey && e.keyCode === 74) {
                    $("#Kanban").focus();
                }
            });
        });
        </script>

    scrollSettings Object

    Gets or sets an object that indicates whether to customize the scrolling behavior of the Kanban.

    Default Value:

    • Object

    Example

  • html
  • <div id="kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
           { Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
           { Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Done", key: "Close" }
                    ],
                    fields: {
                        primaryKey: "Id",
                        swimlaneKey: "Assignee",
                        content: "Summary",
                    },
                    keyField: "Status",
                    allowScrolling: true,
                    scrollSettings: {
                        height: 400,
                        width: 700
                    }
                }
            );
        });
        </script>

    scrollSettings.height string/number

    Gets or sets an object that indicates to render the Kanban with specified scroll height.

    Default Value:

    • 0

    Example

  • html
  • <div id="kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
           { Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
           { Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Done", key: "Close" }
                    ],
                    fields: {
                        primaryKey: "Id",
                        swimlaneKey: "Assignee",
                        content: "Summary",
                    },
                    keyField: "Status",
                    allowScrolling: true,
                    scrollSettings: {
                        height: 400
                    }
                }
            );
        });
        </script>

    scrollSettings.width string/number

    Gets or sets an object that indicates to render the Kanban with specified scroll width.

    Default Value:

    • auto

    Example

  • html
  • <div id="kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
           { Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
           { Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Done", key: "Close" }
                    ],
                    fields: {
                        primaryKey: "Id",
                        swimlaneKey: "Assignee",
                        content: "Summary",
                    },
                    keyField: "Status",
                    allowScrolling: true,
                    scrollSettings: {
                        height: 400,
                        width: 700
                    }
                }
            );
        });
        </script>

    scrollSettings.allowFreezeSwimlane boolean

    To allow the Kanban to freeze particular swimlane at the time of scrolling , until scroll reaches next swimlane and it continues.

    Default Value:

    • false

    Example

  • html
  • <div id="kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
           { Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
           { Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" },
           { Id: 7, Status: "Testing", Summary: "Task 7", Assignee: "Michael" },
           { Id: 8, Status: "InProgress", Summary: "Task 8", Assignee: "Steven" },
           { Id: 9, Status: "Close", Summary: "Task 9", Assignee: "Robert" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    allowScrolling: true,
                    scrollSettings: {
                        height: 500,
                        width: 800,
                        allowFreezeSwimlane: true,
                    },
                    columns: [
                        { headerText: "Backlog", key: "Open", width: 250 },
                        { headerText: "In Progress", key: "InProgress", width: 220 },
                        { headerText: "Testing", key: "Testing", width: 220 },
                        { headerText: "Done", key: "Close", width: 250 }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        swimlaneKey: "Assignee",
                        content: "Summary"
                    },
                });
        });
        </script>

    searchSettings Object

    To customize the searching behavior of the Kanban.

    Default Value:

    • Object

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    },
                    allowSearching: true,
                    searchSettings: {
                        fields: ["Summary", "Id"],
                        key: "",
                        operator: "contains",
                        ignoreCase: true,
                    },
                }
            );
        });
        </script>

    searchSettings.fields Array

    To customize the fields the searching operation can be perform.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    },
                    allowSearching: true,
                    searchSettings: {
                        fields: ["Summary", "Id"],
                        key: "",
                        operator: "contains",
                        ignoreCase: true,
                    }
                }
            );
        });
        </script>

    searchSettings.key string

    To customize the searching string.

    Default Value:

    • ””

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    },
                    allowSearching: true,
                    searchSettings: {                    
                        key: "Task 1",
                        operator: "contains",
                        ignoreCase: true,
                    }
                }
            );
        });
        </script>

    searchSettings.operator string

    To customize the operator based on searching.

    Default Value:

    • contains

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    },
                    allowSearching: true,
                    searchSettings: {                    
                        key: "Task 1",
                        operator: "contains",
                        ignoreCase: true,
                    },
                }
            );
        });
        </script>

    searchSettings.ignoreCase boolean

    To customize the ignore case based on searching.

    Default Value:

    • true

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
                    dataSource: data,
                    columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",                    
                        content: "Summary"
                    },
                    allowSearching: true,
                    searchSettings: {                    
                        key: "task",
                        operator: "contains",
                        ignoreCase: true,
                    },
                }
            );
        });
        </script>

    selectionType enum

    To allow customize selection type. Accepting types are “single” and “multiple”.

    Name Description
    Single Support for Single selection in Kanban
    Multiple Support for multiple selections in Kanban

    Default Value:

    • ej.Kanban.SelectionType.Single

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                {
    
                    dataSource: data,
                    selectionType: "multiple",
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary"
                    }
                });
        });
        </script>

    stackedHeaderRows Array

    Gets or sets an object that indicates to managing the collection of stacked header rows for the Kanban.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
                { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
                { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
                { Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" },
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                 {
                     dataSource: data,
                     columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "Validated", key: "Validate" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" },
                         { headerText: "Done", key: "Close" }
                     ],
                     keyField: "Status",
                     stackedHeaderRows: [{
                         stackedHeaderColumns: [{ headerText: "Unresolved", column: "Backlog,Validated,In Progress" },
                             { headerText: "Resolved", column: "Testing,Done" }
                         ]
                     }
                     ],
                     fields: {
                         primaryKey: "Id",
                         content: "Summary"
                     }
                 });
        });
        </script>

    stackedHeaderRows.stackedHeaderColumns Array

    Gets or sets a value that indicates whether to add stacked header columns into the stacked header rows.

    Default Value:

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
                { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
                { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
                { Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" },
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                 {
                     dataSource: data,
                     columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "Validated", key: "Validate" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" },
                         { headerText: "Done", key: "Close" }
                     ],
                     keyField: "Status",
                     stackedHeaderRows: [{
                         stackedHeaderColumns: [{ headerText: "Unresolved", column: "Backlog,Validated,In Progress" },
                             { headerText: "Resolved", column: "Testing,Done" }
                         ]
                     }
                     ],
                     fields: {
                         primaryKey: "Id",
                         content: "Summary"
                     }
                 });
        });
        </script>

    stackedHeaderRows.stackedHeaderColumns.headerText string

    Gets or sets a value that indicates the headerText for the particular stacked header column.

    Default Value:

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
                { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
                { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
                { Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" },
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                 {
                     dataSource: data,
                     columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "Validated", key: "Validate" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" },
                         { headerText: "Done", key: "Close" }
                     ],
                     keyField: "Status",
                     stackedHeaderRows: [{
                         stackedHeaderColumns: [{ headerText: "Unresolved", column: "Backlog,Validated,In Progress" },
                             { headerText: "Resolved", column: "Testing,Done" }
                         ]
                     }
                     ],
                     fields: {
                         primaryKey: "Id",
                         content: "Summary"
                     }
                 });
        });
        </script>

    stackedHeaderRows.stackedHeaderColumns.column string

    Gets or sets a value that indicates the column for the particular stacked header column.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
                { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
                { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
                { Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" },
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
                 {
                     dataSource: data,
                     columns: [
                         { headerText: "Backlog", key: "Open" },
                         { headerText: "Validated", key: "Validate" },
                         { headerText: "In Progress", key: "InProgress" },
                         { headerText: "Testing", key: "Testing" },
                         { headerText: "Done", key: "Close" }
                     ],
                     keyField: "Status",
                     stackedHeaderRows: [{
                         stackedHeaderColumns: [{ headerText: "Unresolved", column: "Backlog,Validated,In Progress" },
                             { headerText: "Resolved", column: "Testing,Done" }
                         ]
                     }
                     ],
                     fields: {
                         primaryKey: "Id",
                         content: "Summary"
                     }
                 });
        });
        </script>

    tooltipSettings Object

    The tooltip allows to display card details in a tooltip while hovering on it.

    tooltipSettings.enable boolean

    To enable or disable the tooltip display.

    Default Value

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    tooltipSettings: {
                        enable: true,
                    },
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary",
                        title: "Id",
                        tag: "Tags",
                        color: "Type",
                        imageUrl: "ImgUrl"
                    },
                    cardSettings: {
                        colorMapping: {
                            "#cb2027": "Issue,Story",
                            "#67ab47": "Improvement",
                            "#fbae19": "Epic",
                            "#6a5da8": "UG",
                        }
                    },
                });
        });
        </script>

    tooltipSettings.template string

    To customize the tooltip display based on your requirements.

    Default Value:

    • null

    Example

  • html
  • <div id="kanban"></div>
        <script id="tooltipTemp" type="text/x-jsrender">
        <div class='e-kanbantooltiptemp ' style="display: none">
            <table>
                <tr>
                    <td class="photo">
                        <img src="">
                    </td>
    
                    <td class="details">
                        <table>
                            <colgroup>
                                <col width="30%">
                                <col width="70%">
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td class="CardHeader">Name: </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td class="CardHeader">Task: </td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        </script>
        <script type="text/javascript">
        window.kanban = [
           { Id: 1, Status: "Open", Summary: "Task 1", Type: "Epic", Assignee: "Nancy" },
           { Id: 2, Status: "Open", Summary: "Task 2", Type: "Story", Assignee: "Andrew" },
           { Id: 3, Status: "InProgress", Summary: "Task 3", Type: "Improvement", Assignee: "Andrew" },
           { Id: 4, Status: "Testing", Summary: "Task 4", Type: "Issue", Assignee: "Nancy" }
        ];
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#kanban").ejKanban(
                {
                    dataSource: data,
                    tooltipSettings: {
                        enable: true,
                        template: "#tooltipTemp",
                    },
                    columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress" },
                        { headerText: "Testing", key: "Testing" }                    
                    ],
                    keyField: "Status",
                    fields: {
                        primaryKey: "Id",
                        content: "Summary",
                        title: "Id",
                        tag: "Tags",
                        color: "Type",
                        imageUrl: "ImgUrl",
                    },
                    cardSettings: {
                        colorMapping: {
                            "#cb2027": "Issue,Story",
                            "#67ab47": "Improvement",
                            "#fbae19": "Epic",
                            "#6a5da8": "UG",
                        },
                    },
                });
        });
        </script>

    workflows Array

    Gets or sets an object that indicates to render the Kanban with specified workflows.

    Default Value

    • Array

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
    	window.kanbanPizzaData=[
    	{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
    	{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
    	{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
    	{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
    	{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
    	]
            $(function() {
                var data = ej.DataManager(window.kanbanPizzaData)
                $("#Kanban").ejKanban(
                    {
                        dataSource: data,
    					workflows:[
    					{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
    					{key:"Ready to Serve",allowedTransitions:"Served"},
    					{key:"Ready to Deliver",allowedTransitions:"Delivered"}
    					],
    					enableTotalCount:true,
    					allowToggleColumn:true,
                        columns: [
                            { headerText: "Order", key: "Order"},
                            { headerText: "Ready to Serve", key: "Ready to Serve"},
                            { headerText: "Home Delivery", key: "Ready to Deliver" },
    						{ headerText: "Served or Delivered", key: "Delivered,Served"}
                        ],   
                        keyField: "Category",
    					allowTitle: true,
    					fields: {
    					    content: "Description",
    					    primaryKey: "Id"
    					}					  
                    });
            });
        </script>

    workflows.key string/number

    Gets or sets an object that indicates to render the Kanban with specified workflows key.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
    	window.kanbanPizzaData=[
    	{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
    	{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
    	{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
    	{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
    	{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
    	]
            $(function() {
                var data = ej.DataManager(window.kanbanPizzaData)
                $("#Kanban").ejKanban(
                    {
                        dataSource: data,
    					workflows:[
    					{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
    					{key:"Ready to Serve",allowedTransitions:"Served"},
    					{key:"Ready to Deliver",allowedTransitions:"Delivered"}
    					],
    					enableTotalCount:true,
    					allowToggleColumn:true,
                        columns: [
                            { headerText: "Order", key: "Order"},
                            { headerText: "Ready to Serve", key: "Ready to Serve"},
                            { headerText: "Home Delivery", key: "Ready to Deliver" },
    						{ headerText: "Served or Delivered", key: "Delivered,Served"}
                        ],   
                        keyField: "Category",
    					allowTitle: true,
    					fields: {
    					    content: "Description",
    					    primaryKey: "Id"
    					}					  
                    });
            });
        </script>

    workflows.allowedTransitions string

    Gets or sets an object that indicates to render the Kanban with specified workflows allowed Transitions.

    Default Value

    • null

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
    	window.kanbanPizzaData=[
    	{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
    	{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
    	{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
    	{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
    	{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
    	]
            $(function() {
                var data = ej.DataManager(window.kanbanPizzaData)
                $("#Kanban").ejKanban(
                    {
                        dataSource: data,
    					workflows:[
    					{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
    					{key:"Ready to Serve",allowedTransitions:"Served"},
    					{key:"Ready to Deliver",allowedTransitions:"Delivered"}
    					],
    					enableTotalCount:true,
    					allowToggleColumn:true,
                        columns: [
                            { headerText: "Order", key: "Order"},
                            { headerText: "Ready to Serve", key: "Ready to Serve"},
                            { headerText: "Home Delivery", key: "Ready to Deliver" },
    						{ headerText: "Served or Delivered", key: "Delivered,Served"}
                        ],   
                        keyField: "Category",
    					allowTitle: true,
    					fields: {
    					    content: "Description",
    					    primaryKey: "Id"
    					}					  
                    });
            });
        </script>

    locale string

    Gets or sets a value that indicates whether to customizing the user interface (UI) as locale-specific in order to display regional data i.e. in a language and culture specific to a particular country or region.

    Default Value:

    • “en-US”

    Example

  • html
  • <div id="Kanban"></div>
        <script>
        window.kanban = [
                { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
                { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
                { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
                { Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
                { Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" }
        ];
        ej.Kanban.Locale["de-DE"] = {
            EmptyCard: "Keine Karten angezeigt werden",
            SaveButton: "Speichern",
            CancelButton: "stornieren",
            EditFormTitle: "Details von ",
            AddFormTitle: "Neue Karte hinzufugen",
            SwimlaneCaptionFormat: "- 8 Artikel  Artikel ",
            FilterSettings: "Filter:",
            FilterOfText: "Von",
            Cards: "kaarten"
            Max: "Max.",
            Min: "Min."
        };
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban(
            {
                dataSource: data,
                locale: "de-DE",
                columns: [
                        { headerText: "Backlog", key: "Open" },
                        { headerText: "In Progress", key: "InProgress", constraints: { max: 2 } },
                        { headerText: "Testing", key: "Testing" }
                ],
                keyField: "Status",
                allowTitle: true,
                fields: {
                    primaryKey: "Id",
                    swimlaneKey: "Assignee",
                    content: "Summary"
                }
            });
        });
        </script>

    showColumnWhenEmpty boolean

    Gets or sets a value that indicates whether to render kanban columns using without data source.

    Default Value

    • false

    Example

  • html
  • <div id="Kanban"></div>
        <script type="text/javascript">
        window.kanban = [
            { Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
            { Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
            { Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
            { Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
        ];
    	var data = ej.DataManager(window.kanban).executeLocal(ej.Query().take(0));
        $(function () {
            var data = ej.DataManager(window.kanban);
            $("#Kanban").ejKanban({
                dataSource: data,
                showColumnWhenEmpty: true,
                columns: [
                    { headerText: "Backlog", key: "Open" },
                    { headerText: "In Progress", key: "InProgress" },
                    { headerText: "Testing", key: "Testing" },
                    { headerText: "Done", key: "Close" }
                ],
                keyField: "Status",
                fields: {
                    primaryKey: "Id",
                    content: "Summary",
                },
    			editSettings: {
                    editItems: [
                        { field: "Id", editType: ej.Kanban.EditingType.Text,validationRules: { required: true, number: true }},
                        { field: "Status", editType: ej.Kanban.EditingType.Text },
                        { field: "Assignee", editType: ej.Kanban.EditingType.Text },
                        { field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 },validationRules: {range: [0, 1000]}},
                        { field: "Summary", editType: ej.Kanban.EditingType.TextArea,validationRules: { required: true}}
    					],
                        allowEditing: true,
                        allowAdding: true
                    }
            });
        });
        </script>

    Methods

    columns(column,key,[action])

    Add or remove columns in Kanban columns collections.Default action is add.

    Name Type Description
    column details array/string Pass array of columns or string of headerText to add/remove the column in Kanban
    key value array/string Pass array of columns or string of key value to add/remove the column in Kanban
    action string optional Pass add/remove action to be performed. By default "add" action will perform

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#kanban").data("ejKanban");
        // remove Kanban column
        kanbanObj.columns("Testing","Testing", "remove");
        // Add new column into Kanban or modified already existing column in the Kanban.
        kanbanObj.columns("Review","Review","add"); 
        </script>

    destroy()

    Destroy the Kanban widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

    Example

  • html
  • <script>
        var kanbanObj = $("#Kanban").data("ejKanban");
        kanbanObj.destroy(); // destroy the Kanban
        </script>
  • html
  • <script>
        // destroy the Kanban
        $("#Kanban").ejKanban("destroy");        
        </script>

    dataSource(datasource)

    Refresh the Kanban with new data source.

    Name Type Description
    datasource array Pass new data source to the Kanban

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Refreshes the Kanban data source
        kanbanObj.dataSource(data); 
        </script>
  • html
  • <script>
        // Refreshes the Kanban data source
        $("#Kanban").ejKanban("dataSource", data);        
        </script>

    toggleColumn(headerText or $div)

    toggleColumn based on the headerText in Kanban.

    Name Type Description
    headerText object Pass the header text of the column to get the corresponding column object

    Example

  • html
  • <script>
          // Create Kanban object.
          var kanbanObj = $("#Kanban").data("ejKanban");
          // toggleColumn the row based on the row state
          kanbanObj.toggleColumn("Backlog");  
          </script>
  • html
  • <script>
          // toggleColumn the row based on the row state
          $("#Kanban").ejKanban("toggleColumn",("Backlog"));        
          </script>

    toggleCard($div or id)

    Expand or collapse the card based on the state of target “div”

    Name Type Description
    key string/number Pass the id of card to be toggle

    Example

  • html
  • <script>
          // Create Kanban object.
          var kanbanObj = $("#Kanban").data("ejKanban");
          // toggleCard the row based on the row state
          kanbanObj.toggleCard("2");  
          </script>
  • html
  • <script>
          // toggleCard the row based on the row state
          $("#Kanban").ejKanban("toggleCard",("2"));        
          </script>

    getVisibleColumnNames()

    Used for get the names of all the visible column name collections in Kanban.

    Returns:

    Array

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Gets the names of all the visible column collections
        kanbanObj.getVisibleColumnNames(); 
        </script>
  • html
  • <script>
        // Gets the names of all the visible column collections
        $("#Kanban").ejKanban("getVisibleColumnNames");        
        </script>

    getScrollObject()

    Get the scroller object of Kanban.

    Returns:

    ej.Scroller

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Gets scroll object of Kanban control
        kanbanObj.getScrollObject(); 
        </script>
  • html
  • <script>
        // Gets scroll object of Kanban control
        $("#Kanban").ejKanban("getScrollObject");        
        </script>

    getColumnByHeaderText(headerText)

    Get the column details based on the given header text in Kanban.

    Name Type Description
    headerText string Pass the header text of the column to get the corresponding column object

    Returns:

    string

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Gets the column details based on the given headerText
        kanbanObj.getColumnByHeaderText("Testing"); 
        </script>
  • html
  • <script>
        // Gets the column details based on the given headerText
        $("#Kanban").ejKanban("getColumnByHeaderText", "Testing");        
        </script>

    getHeaderTable()

    Get the table details based on the given header table in Kanban.

    Returns:

    string

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Gets the table details based on the given headerTable
        kanbanObj.getHeaderTable(); 
        </script>

    hideColumns(headerText)

    Hide columns from the Kanban based on the header text

    Name Type Description
    headerText array/string you can pass either array of header text of various columns or a header text of a column to hide

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        kanbanObj.hideColumns("Testing"); // Hides column based on the given header text of the column
        kanbanObj.hideColumns(["Testing", "Done"]); // Hide columns based on the array of header text of the columns given
        </script>
  • html
  • <script>
        // Hide column based on the given header text of the column
        $("#Kanban").ejKanban("hideColumns", "Testing"); 
        // Hide columns based on the array of header text of the columns given
        $("#Kanban").ejKanban("hideColumns", ["Testing", "Done"]);                  
        </script>

    print()

    Print the Kanban Board

    Returns:

    Void

    ####Example

  • html
  • <div id="Kanban"></div> 
        <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // It prints the kanban board.
        kanbanObj.print(); 
        </script>
  • html
  • <div id="Kanban"></div>; 
        <script>
        // It prints the kanban board.
        $("#Kanban").ejKanban("print");        
        </script>

    refreshTemplate()

    Refresh the template of the Kanban

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Refreshes the template of the Kanban control
        kanbanObj.refreshTemplate(); 
        </script>
  • html
  • <script>
        // Refreshes the template of the Kanban control.
        $("#Kanban").ejKanban("refreshTemplate");        
        </script>

    refresh([templateRefresh])

    Refresh the Kanban contents.The template refreshment is based on the argument passed along with this method

    Name Type Description
    templateRefresh boolean optional When templateRefresh is set true, template and Kanban contents both are refreshed in Kanban else only Kanban content is refreshed

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        kanbanObj.refresh(); // Refresh the Kanban contents only
        kanbanObj.refresh(true); // Refresh the template of the Kanban control.
        </script>
  • html
  • <div id="Kanban"></div> 
        <script>
        // Refresh the Kanban.
        $("#Kanban").ejKanban("refresh");        
        // Refresh the template of the Kanban control.
        $("#Kanban").ejKanban("refresh", true);        
        </script>

    showColumns(headerText)

    Show columns in the Kanban based on the header text.

    Name Type Description
    headerText array/string You can pass either array of header text of various columns or a header text of a column to show

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#kanban").data("ejKanban");
        kanbanObj.showColumns("Testing"); // Shows column based on the given header text of the column
        kanbanObj.showColumns(["Testing", "Done"]); // Shows columns based on the array of header text of the columns given
        </script>
  • html
  • <script>
        // Shows column based on the given header text of the column
        $("#kanban").ejKanban("showColumns", "Testing"); 
        // Shows columns based on the array of header text of the columns given
        $("#Kanban").ejKanban("showColumns", ["Testing", "Done"]);                  
        </script>

    updateCard(key,data)

    Update a card in Kanban control based on key and JSON data given.

    Name Type Description
    key string Pass the key field Name of the column
    data array Pass the edited JSON data of card need to be update.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends a update card request to the Kanban
        kanbanObj.updateCard(2,{ Id: 2, Status: "Open", Summary: "Task 1", Assignee: "Andrew"});
        </script>

    KanbanSelection

    KanbanSelection.clear()

    It is used to clear all the card selection.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#kanban").data("ejKanban");
        kanbanObj.KanbanSelection.clear()  // clears all of the card selection
        </script>
  • html
  • <script>         
        // clears all of the card selection
        $("#Kanban").ejKanban("clear");        
        </script>

    KanbanSwimlane

    KanbanSwimlane.expandAll()

    Expand all the swimlane rows in Kanban.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // expand all the  rows
        kanbanObj.KanbanSwimlane.expandAll(); 
        </script>
  • html
  • <script>
        // expand all the group caption rows
        $("#Kanban").ejKanban("expandAll");        
        </script>

    KanbanSwimlane.collapseAll()

    Collapse all the swimlane rows in Kanban.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Collapse all the  rows
        kanbanObj.KanbanSwimlane.collapseAll();
        </script>
  • html
  • <script>
        // Collapse all the group caption rows
        $("#Kanban").ejKanban("collapseAll");        
        </script>

    KanbanSwimlane.toggle($div or key)

    Expand or collapse the swimlane row based on the state of target “div”

    Name Type Description
    $div object Pass the div object to toggleSwimlane row based on its row state

    Example

  • html
  • <script>
          // Create Kanban object.
          var kanbanObj = $("#Kanban").data("ejKanban");
          // toggle the row based on the row state
          kanbanObj.KanbanSwimlane.toggle($(".e-slexpandcollapse").eq(1)); 
          </script>
  • html
  • <script>
          // toggle the row based on the row state
          $("#Kanban").ejKanban("toggleSwimlane", $(".e-slexpandcollapse").eq(1)); 
          </script>     
          </script>

    KanbanFilter

    KanbanFilter.clearSearch()

    Method used for send a clear search request to Kanban.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends a clearSearch request to the Kanban
        kanbanObj.KanbanFilter.clearSearch();
        </script>

    KanbanFilter.searchCards(searchString)

    Send a search request to Kanban with specified string passed in it.

    Name Type Description
  • html
  • searchString
    string Pass the string to search in Kanban card

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends a search request to the Kanban
        kanbanObj.KanbanFilter.searchCards("Analyze"); 
        </script>
  • html
  • <script>
        // Sends a search request to the Kanban
        $("#Kanban").ejKanban("searchCards", "Analyze");        
        </script>

    KanbanFilter.clearFilter()

    Send a clear request to filter cards in the kanban.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends clear request to filter the cards
        kanbanObj.KanbanFilter.clearFilter();
        </script>

    KanbanFilter.filterCards()

    Send a filtering request to cards in the kanban.

    Name Type Description
    query object Pass the query to the cards

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends filtering request to the cards
        kanbanObj.KanbanFilter.filterCards(new ej.Query().where("Assignee", "equal", "Janet"));
        </script>

    KanbanEdit

    KanbanEdit.addCard([primaryKey],[card])

    Add a new card in Kanban control when allowAdding is set as true. If parameters are not given default dialog will be open.

    Name Type Description
    primaryKey string Pass the primary key field Name of the column
    card array Pass the edited JSON data of card need to be add.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends an add new card request to the Kanban
        kanbanObj.KanbanEdit.addCard(); 
        </script>
  • html
  • <script>
        // add new card to the Kanban
         kanbanObj.KanbanEdit.addCard("2",{Id:2, Status: "Open", Summary: "Task 1", Assignee: "Nancy" })     
        </script>

    KanbanEdit.cancelEdit()

    Send a cancel request of add/edit card in Kanban when allowEditing/allowAdding is set as true.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends a cancel request to the Kanban
        kanbanObj.KanbanEdit.cancelEdit(); 
        </script>
  • html
  • <script>
        // Sends a cancel request to the Kanban
        $("#Kanban").ejKanban("cancelEdit");        
        </script>

    KanbanEdit.deleteCard(Key)

    Delete a card in Kanban control when allowAdding/allowEditing is set as true.

    Name Type Description
    Key string/number Pass the key of card to be delete

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#kanban").data("ejKanban");
        // Sends a delete card request to the Kanban
        kanbanObj.KanbanEdit.deleteCard(2); 
        </script>

    KanbanEdit.endEdit()

    Send a save request in Kanban when any card is in edit/new add card state and allowEditing/allowAdding is set as true.

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends a save request to the Kanban
        kanbanObj.KanbanEdit.endEdit(); 
        </script>
  • html
  • <script>
        // Sends a save request to the Kanban
        $("#Kanban").ejKanban("endEdit");        
        </script>

    KanbanEdit.startEdit($div or key)

    Send an edit card request in Kanban when allowEditing is set as true. Parameter will be HTML element or primary key

    </tr>
    Name Type Description
    $div object Pass the div selected row element to be edited in Kanban
    key string/number Pass the key element to be edited in Kanban

    Example

  • html
  • <script>
        // Create Kanban object.
        var kanbanObj = $("#Kanban").data("ejKanban");
        // Sends an edit card request to the Kanban
        kanbanObj.KanbanEdit.startEdit($(".e-kanbancontent .e-kanbancard").first()); 
        kanbanObj.KanbanEdit.startEdit(2); 
        </script>
  • html
  • <script>
        // Sends an edit card request to the Kanban
        $("#Kanban").ejKanban("startEdit", ($(".e-kanbancontent .e-kanbancard").first());        
        $("#Kanban").ejKanban("startEdit", 2);        
        </script>

    KanbanEdit.setValidationToField(name, rules)

    Method used for set validation to a field during editing.

    Name Type Description
    name string Specify the name of the column to set validation rules
    rules object Specify the validation rules for the field

    Example

  • html
  • <script>
         // Create Kanban object.
         var kanbanObj = $("#Kanban").data("ejKanban");
         // It is used to set validation to a field during editing
         kanbanObj.KanbanEdit.setValidationToField("Summary", { required: true }); 
         </script>
  • html
  • <script>
        // It is used to set validation to a field during editing
        $("#Kanban").ejKanban("setValidationToField", "Summary", { required: true });
        </script>

    Events

    actionBegin

    Triggered for every Kanban action before its starts.

    Name Type Description
    argument Object Event parameters when Kanban is initialized:
    Name Type Description
    model object Returns the Kanban model.
    type string Returns the name of the event.
    argument Object Event parameters when Kanban card editing action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    originalEventType string Returns the current action event type.
    primaryKeyValue string Returns primary key value.
    requestType string Returns request type.
    rowIndex number Returns the edited row index.
    type string Returns the name of the event.
    argument Object Event parameters when Kanban card save action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the card object (JSON).
    model object Returns the Kanban model.
    primaryKeyValue string Returns primary key value.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters when Kanban card cancel action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters when Kanban card delete action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the card object (JSON).
    model object Returns the Kanban model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument Object Event parameters when add new card action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the card object (JSON).
    model object Returns the Kanban model.
    requestType string Returns request type as `beginadd`.
    type string Returns the name of the event.
    argument Object Event parameters when Kanban filtering action starts:
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentFiltering object object Returns current filtering object field name.
    filterCollection object Returns filter details.
    model object Returns the Kanban model.
    requestType string Returns request type.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
          <script>
          $("#Kanban").ejKanban({
          actionBegin: function (args){}
          });
          </script>

    actionComplete

    Triggered for every Kanban action success event.

    Name Type Description
    argument Object Arguments in actionComplete when Kanban is initialized.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    requestType string Returns request type.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after Kanban card editing action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    primaryKey string Returns primary key.
    primaryKeyValue string Returns primary key value.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after Kanban card save action is completed.
    Name Type Description
    cancel object Returns the cancel option value.
    data object Returns the card object (JSON).
    selectedRow number Returns the selectedRow index.
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after Kanban card cancel action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after Kanban card delete action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the card object (JSON).
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after add new card action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns empty card object (JSON).
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    argument object Arguments in actionComplete after Kanban filtering action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentFilteringColumn string Returns current filtering column field name.
    filterCollection object Returns filter details.
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        actionComplete: function (args) {}
        }); 
        </script>

    actionFailure

    Triggered for every Kanban action server failure event.

    Name Type Description
    argument Object Arguments in actionFailure when Kanban is initialized.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    requestType string Returns request type.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after Kanban card editing action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    primaryKeyValue string Returns primary key value.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after Kanban card save action is completed.
    Name Type Description
    cancel object Returns the cancel option value.
    data object Returns the card object (JSON).
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after Kanban card delete action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns the card object (JSON).
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after add new card action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns empty card object (JSON).
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    error object Returns the error return by server.
    argument object Arguments in actionFailure after Kanban filtering action is completed.
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentFilteringColumn string Returns current filtering column field name.
    filterCollection object Returns filter details.
    model object Returns the Kanban model.
    originalEventType string Returns current action event type.
    requestType string Returns request type.
    target object Returns Kanban element.
    type string Returns the name of the event.
    error object Returns the error return by server.

    Example

  • html
  • <div id="Kanban"></div> 
         <script>
         $("#Kanban").ejKanban({
         actionFailure: function (args) {}
         }); 
         </script>

    beginEdit

    Triggered before the task is going to be edited.

    Name Type Description
    argument Object Arguments when begin edit event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    primaryKeyValue string Returns primary key value.
    data object Returns begin edit data.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        beginEdit: function (args) {}
        });
        </script>

    beforeCardSelect

    Triggered before the card is selected.

    Name Type Description
    argument Object Arguments when beforeCardSelect event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    cellIndex number Returns the select cell index value.
    cardIndex number Returns the select card index value.
    currentCell object Returns the select cell element
    cancel boolean Returns the cancel option value.
    previousCard object Returns the previously select the card element
    previous Row cell index array Returns the previously select card indexes
    Target object Returns the Target item.
    model object Returns the Kanban model.
    data object Returns select card data.
    type string Returns the name of the event.

    Example

  • html
  • <div id="kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        beforeCardSelect: function (args) {}
        });
        </script>

    cardClick

    Trigger after the card is clicked.

    Name Type Description
    argument Object Arguments when cardClick event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns current record object (JSON).
    currentCard string Returns the current card to the Kanban.
    target object Returns Kanban element.
    model object Returns the Kanban model.
    columnName string Returns the Header text of the column corresponding to the selected card.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").Kanban({
        cardClick: function (args) {}
        });
        </script>

    cardDrag

    Triggered when the card is being dragged.

    Name Type Description
    argument Object Arguments when columnDrag event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns drag data.
    drag target object Returns drag start element.
    draggedElement object Returns dragged element.
    model object Returns the Kanban model.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        cardDrag: function (args) {}
        });
        </script>

    cardDragStart

    Triggered when card dragging start.

    Name Type Description
    argument Object Arguments when cardDragStart event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns card drag start data.
    draggedElement object Returns dragged element.
    model object Returns the Kanban model.
    drag target object Returns drag start element.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        cardDragStart: function (args) {}
        });
        </script>

    cardDragStop

    Triggered when card dragging stops.

    Name Type Description
    argument Object Arguments when cardDragStart event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggedElement object Returns dragged element.
    model object Returns the Kanban model.
    drop target object Returns drag stop element.
    data object Returns drag stop data.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        cardDragStop: function (args) {}
        });
        </script>

    cardDrop

    Triggered when the card is Dropped.

    Name Type Description
    argument Object Arguments when cardDrop event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    draggedElement object Returns dragged element.
    draggedParent object Returns previous parent of dragged element
    data object Returns dragged data.
    model object Returns the Kanban model.
    target object Returns drop element.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div>
        <script>
        $("#Kanban").ejKanban({
        cardDrop: function (args) {}
        });
        </script>

    cardSelect

    Triggered after the card is selected.

    Name Type Description
    argument Object Arguments when cardSelect event is triggered. <thead </thead>
    Name Type Description
    cellIndex number Returns the select cell index value.
    cardIndex number Returns the select card index value.
    currentCell object Returns the select cell element
    cancel boolean Returns the cancel option value.
    previousCard object Returns the previously select the card element
    previous Row cell index array Returns the previously select card indexes
    currentTarget object Returns the current item.
    model object Returns the Kanban model.
    data object Returns select card data.
    type string Returns the name of the event.

    Example

  • html
  • <div id="kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        cardSelect: function (args) {}
        });
        </script>

    cardDoubleClick

    Triggered when card is double clicked.

    Name Type Description
    argument Object Arguments when cardDoubleClick event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    data object Returns current card object (JSON).
    model object Returns the Kanban model.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        cardDoubleClick: function (args) {}
        });
        </script>

    cardSelecting

    Triggered before the card is selected.

    Name Type Description
    argument Object Arguments when cardSelecting event is triggered.
    Name Type Description
    cellIndex number Returns the selecting cell index value.
    cardIndex number Returns the selecting card index value.
    currentCell object Returns the selecting cell element
    cancel boolean Returns the cancel option value.
    previousCard object Returns the previously selecting the card element
    previous Row cell index array Returns the previously rowcell is selecting card indexes
    currentTarget object Returns the current item.
    model object Returns the Kanban model.
    data object Returns added data.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        cardSelecting: function (args) {}
        });
        </script>

    create

    Triggered when the Kanban is rendered completely

    Name Type Description
    argument Object Event parameters from kanban
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the kanban model.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div>
        <script>
        $("#Kanban").ejKanban({
        create: function (args){}
        });
        </script>

    cellClick

    Triggers after the cell is clicked.

    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the kanban model.
    type string Returns the name of the event.
    cellIndex number Returns the select cell index value.
    rowIndex number Returns the edited row index.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        cellClick: function (args) {}
        });
        </script>

    contextOpen

    Triggered before the context menu is opened.

    Name Type Description
    argument Object Arguments when contextOpen event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    type string Returns the name of the event.
    currentTarget object Returns the current item.
    status boolean Returns the status of contextmenu item which denotes its enabled state.
    target object Returns the target item.

    Example

  • html
  • <div id="Kanban"></div> 
         <script>
         $("#Kanban").ejKanban({
         contextOpen: function (args){}
         });
        </script>

    contextClick

    Triggered when context menu item is clicked in Kanban

    Name Type Description
    argument Object Arguments when contextClick event is triggered
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    type string Returns the name of the event.
    currentTarget object Returns the current item.
    status boolean Returns the status of contextmenu item which denotes its enabled state.
    target object Returns the target item.

    Example

  • html
  • <div id="Kanban"></div> 
         <script>
         $("#Kanban").ejKanban({
         contextClick: function (args){}
         });
        </script>

    dataBound

    Triggered the Kanban is bound with data during initial rendering.

    Name Type Description
    argument Object Arguments when dataBound event is triggered.
    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the Kanban model.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div>
        <script>
        $("#Kanban").ejKanban({
        dataBound: function (args) {}
        });
        </script>

    destroy

    Triggered when Kanban going to destroy.

    Name Type Description
    argument Object Arguments when destroy event is triggered.
    Name Type Description
    model object Returns the kanban model.
    data object Returns deleted data.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        destroy: function (args) {}
        });
        </script>

    endDelete

    Triggered after the card is deleted.

    Name Type Description
    argument Object Arguments when endDelete event is triggered.
    Name Type Description
    model object Returns the Kanban model.
    requestType string Returns request type.
    cancel boolean Returns the cancel option value.
    data object Returns deleted data.
    type string Returns the name of the event.
    action string Current action name

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        endDelete: function (args) {}
        });
        </script>

    endEdit

    Triggered after the card is edited.

    Name Type Description
    argument Object Arguments when endEdit event is triggered.
    Name Type Description
    model object Returns the Kanban model.
    requestType string Returns request type.
    cancel boolean Returns the cancel option value.
    data object Returns modified data.
    type string Returns the name of the event.
    action string Current Action name

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        endEdit: function (args) {}
        });
        </script>

    headerClick

    Triggers after the header is clicked.

    Name Type Description
    cancel boolean Returns the cancel option value.
    model object Returns the kanban model.
    type string Returns the name of the event.
    cellIndex number Returns the select cell index value.
    columnData object Returns the column object.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        headerClick: function (args) {}
        });
        </script>

    load

    Triggered initial load.

    Name Type Description
    argument Object Arguments when load event is triggered.
    Name Type Description
    model object Returns the kanban model.
    cancel boolean Returns the cancel option value.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        load: function (args) {}
        });
        </script>

    swimlaneClick

    Triggers before swim lane expand or collapse icon is clicked.

    Name Type Description
    argument Object Arguments when swim lane click event is triggered.
    Name Type Description
    action string Current Action name while swim lane clicked. Actions are "expand" or "collapse"
    model object Returns the kanban model.
    cancel boolean Returns the cancel option value.
    type string Returns the name of the event.
    data object Returns the swim lane group data's.
    rowIndex number Returns current swim lane row index.
    target object Returns current target element.

    Example

  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        swimlaneClick: function (args) {}
        });
        </script>

    queryCellInfo

    Triggered every time a single card rendered request is made to access particular card information.

    Name Type Description
    argument Object Event parameters from Kanban
    Name Type Description
    card object Returns Kanban card.
    cell object Returns Kanban card.
    cancel boolean Returns the cancel option value.
    data object Returns current row record object (JSON).
    column object Returns the column object.
    model object Returns the Kanban model.
    type string Returns the name of the event.

    Example

  • html
  • <div id="Kanban"></div> 
         <script>
         $("#Kanban").ejKanban({
         queryCellInfo: function (args){}
         });
        </script>

    toolbarClick

    Triggered when toolbar item is clicked in Kanban.

    Name Type Description
    argument Object Arguments when toolBarClick event is triggered. </table> </td> </tr> </table> #### Example
  • html
  • <div id="Kanban"></div> 
        <script>
        $("#Kanban").ejKanban({
        toolbarClick: function (args) {
        }
        });
        </script>
    Name Type Description
    cancel boolean Returns the cancel option value.
    currentTarget object Returns the current item.
    itemId string Returns the item id of that current element.
    itemIndex number Returns the item index of that current element.
    itemName string Returns the item name of that current element.
    itemText string Returns the item text of that current element.
    model object Returns the Kanban model.
    type string Returns the name of the event.
    toolbarData object Returns the toolbar object of the Kanban.