Search results

Card Editing in JavaScript Kanban control

The Kanban provides built-in support to add, edit and delete a card using dialog module. User can edit a card using the following ways.

  • Built-in dialog module
  • Custom Fields
  • Dialog template

Default Dialog

When double-click on the cards, the dialog is opened with below fields to edit a card. This dialog contains Delete, Save and Cancel buttons.

  • To edit a card, modify the card details and click the Save button.
  • To delete a card, click Delete button.
  • Click on the Cancel button to cancel the editing action.

The dialog displays with the following fields which mapped to dialog fields by default.

Key Type Text
cardSettings.headerField Input ID
keyField DropDown -
cardSettings.contentField TextArea -
cardSettings.priority(If applicable) Numeric -
swimlaneSettings.keyField(If applicable) DropDown -
Source
Preview
index.ts
index.html
datasource.ts
import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    }
});
kanbanObj.appendTo('#Kanban');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Cards</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Cards" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>
export let kanbanData: Object[] = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Testing,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Testing',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Testing',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Testing',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];

Custom Fields

You can change the default fields of dialog using fields property inside the dialogSettings property. The key property used to map the dataSource value and rendered the corresponding component based on specified type property.

The following types are available in dialog fields.

  • String
  • Numeric
  • TextArea
  • DropDown
  • TextBox
  • Input

If type is not defined in the fields, then it renders as the HTML input element in dialog.

Source
Preview
index.ts
index.html
datasource.ts
import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    dialogSettings: {
        fields: [
            { key: 'Id', type: 'Input' },
            { key: 'Status', type: 'DropDown' },
            { key: 'Estimate', type: 'Numeric' },
            { key: 'Summary', type: 'TextArea' }
        ]
    }
});
kanbanObj.appendTo('#Kanban');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Custom Label Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Custom Label Dialog" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>
export let kanbanData: Object[] = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Testing,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Testing',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Testing',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Testing',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];

Custom Fields label

By default, the fields key mapping value is considered as a label and you can change this label by using text property.

Source
Preview
index.ts
index.html
datasource.ts
import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    dialogSettings: {
        fields: [
            { text: 'ID', key: 'Id', type: 'Input' },
            { key: 'Status', type: 'DropDown' },
            { key: 'Estimate', type: 'Numeric' },
            { key: 'Summary', type: 'TextArea' }
        ]
    }
});
kanbanObj.appendTo('#Kanban');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Label Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Label Dialog" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>
export let kanbanData: Object[] = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Testing,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Testing',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Testing',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Testing',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];

Fields Validation

The dialog fields can be validated while click on the Save button. This can be achieved by using validationRules property.

Source
Preview
index.ts
index.html
datasource.ts
import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    dialogSettings: {
        fields: [
            { text: 'ID', key: 'Id', type: 'Input' },
            { key: 'Status', type: 'DropDown' },
            { key: 'Estimate', type: 'Numeric', validationRules: { range: [0, 1000] } },
            { key: 'Summary', type: 'TextArea', validationRules: { required: true } }
        ]
    }
});
kanbanObj.appendTo('#Kanban');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Dialog Fields Validation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Dialog Fields Validation" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>
export let kanbanData: Object[] = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Testing,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Testing',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Testing',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Testing',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];

Dialog Template

Using the dialog template, you can render your own dialog by defining the template property. Initialize the template as SCRIPT element Id or HTML string which holds the template and map it to the template property.

Source
Preview
index.ts
index.html
datasource.ts
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { NumericTextBox, TextBox } from '@syncfusion/ej2-inputs';
import { Kanban, DialogEventArgs } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    dialogSettings: {
        template: '#dialogTemplate'
    },
    dialogOpen: onDialogOpen
});
kanbanObj.appendTo('#Kanban');
let statusData: string[] = ['Open', 'InProgress', 'Close'];
let assigneeData: string[] = ['Nancy Davloio', 'Andrew Fuller', 'Janet Leverling',
        'Steven walker', 'Robert King', 'Margaret hamilt', 'Michael Suyama'];
let priorityData: string[] = ['Low', 'Normal', 'Critical', 'Release Breaker', 'High'];
    function onDialogOpen(args: DialogEventArgs): void {
        if (args.requestType !== 'Delete') {
            let curData: { [key: string]: Object } = args.data;
            let filledTextBox: TextBox = new TextBox({});
            filledTextBox.appendTo(args.element.querySelector('#Id') as HTMLInputElement);
            let numericObj: NumericTextBox = new NumericTextBox({
                value: curData.Estimate as number, placeholder: 'Estimate'
            });
            numericObj.appendTo(args.element.querySelector('#Estimate') as HTMLInputElement);
            let statusDropObj: DropDownList = new DropDownList({
                value: curData.Status as string, popupHeight: '300px',
                dataSource: statusData, fields: { text: 'Status', value: 'Status' }, placeholder: 'Status'
            });
            statusDropObj.appendTo(args.element.querySelector('#Status') as HTMLInputElement);
            let assigneeDropObj: DropDownList = new DropDownList({
                value: curData.Assignee as string, popupHeight: '300px',
                dataSource: assigneeData, fields: { text: 'Assignee', value: 'Assignee' }, placeholder: 'Assignee'
            });
            assigneeDropObj.appendTo(args.element.querySelector('#Assignee') as HTMLInputElement);
            let priorityObj: DropDownList = new DropDownList({
                value: curData.Priority as string, popupHeight: '300px',
                dataSource: priorityData, fields: { text: 'Priority', value: 'Priority' }, placeholder: 'Priority'
            });
            priorityObj.appendTo(args.element.querySelector('#Priority') as HTMLInputElement);
            let textareaObj: TextBox = new TextBox({
                placeholder: 'Summary',
                multiline: true
            });
            textareaObj.appendTo(args.element.querySelector('#Summary') as HTMLInputElement);
        }
    }
    let count: number = 31;
    document.getElementById('addNew').onclick = (e: Event): void => {
        let curData: object = {
            Id: 'Task ' + count, Status: 'Open', Priority: 'Normal', Assignee: 'Andrew Fuller', Estimate: 0, Tags: '', Summary: ''
        };
        kanbanObj.openDialog('Add', curData);
        count++;
    };
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Dialog Template</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Dialog Template" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
    <script id='dialogTemplate' type="text/x-template">
        <table>
            <tbody>
                <tr>
                    <td class="e-label">ID</td>
                    <td>
                        <input id="Id" name="Id" type="text" class="e-field" value="${Id}" disabled required/>
                    </td>
                </tr>
                <tr>
                    <td class="e-label">Status</td>
                    <td>
                        <input type="text" name="Status" id="Status" class="e-field" value=${Status} required />
                    </td>
                </tr>
                <tr>
                    <td class="e-label">Assignee</td>
                    <td>
                        <input type="text" name="Assignee" id="Assignee" class="e-field" value=${Assignee} /> 
                    </td>
                </tr>
                <tr>
                    <td class="e-label">Priority</td>
                    <td>
                        <input type="text" name="Priority" id="Priority" class="e-field" value=${Priority} />
                    </td>
                </tr>
                <tr>
                    <td class="e-label">Summary</td>
                    <td>
                        <textarea type="text" name="Summary" id="Summary" class="e-field" value=${Summary}>${Summary}</textarea>
                        <span class="e-float-line"></span>
                    </td>
                </tr>
            </tbody>
        </table>    
    </script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>
export let kanbanData: Object[] = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Review',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Review',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Review,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Review',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Review',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Review',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Review',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];

Prevent Dialog

The Kanban allows to prevent to open a dialog on card double-click by enabling args.cancel in dialogOpen event.

Source
Preview
index.ts
index.html
datasource.ts
import { Kanban } from '@syncfusion/ej2-kanban';
import { kanbanData, DialogEventArgs } from './datasource.ts';

let kanbanObj: Kanban = new Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    dialogOpen: 'dialogOpen'
});
kanbanObj.appendTo('#Kanban');
function dialogOpen(args: DialogEventArgs): void {
    args.cancel = true;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Kanban Prevent Dialog Open</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Kanban Prevent Dialog Open" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-kanban/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
    <script src="systemjs.config.js" type="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>
</body>

</html>
export let kanbanData: Object[] = [
    {
        'Id': 1,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'InProgress',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'RankId': 1
    },
    {
        'Id': 3,
        'Status': 'Open',
        'Summary': 'Arrange a web meeting with the customer to get new requirements.',
        'Type': 'Others',
        'Priority': 'Critical',
        'Tags': 'Meeting',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'InProgress',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 6,
        'Status': 'Close',
        'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
        'Type': 'Others',
        'Priority': 'Low',
        'Tags': 'Meeting',
        'Estimate': 2,
        'Assignee': 'Michael Suyama',
        'RankId': 1
    },
    {
        'Id': 7,
        'Status': 'Validate',
        'Summary': 'Validate new requirements',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Robert King',
        'RankId': 1
    },
    {
        'Id': 8,
        'Status': 'Close',
        'Summary': 'Login page validation',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Validation,Fix',
        'Estimate': 2.5,
        'Assignee': 'Laura Callahan',
        'RankId': 2
    },
    {
        'Id': 9,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in Safari browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'Fix,Safari',
        'Estimate': 1.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 2
    },
    {
        'Id': 10,
        'Status': 'Close',
        'Summary': 'Test the application in the IE browser.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Testing,IE',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 3
    },
    {
        'Id': 11,
        'Status': 'Validate',
        'Summary': 'Validate the issues reported by the customer.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Validation,Fix',
        'Estimate': 1,
        'Assignee': 'Steven walker',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Testing',
        'Summary': 'Check Login page validation.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Testing',
        'Estimate': 0.5,
        'Assignee': 'Michael Suyama',
        'RankId': 3
    },
    {
        'Id': 13,
        'Status': 'Open',
        'Summary': 'API improvements.',
        'Type': 'Improvement',
        'Priority': 'High',
        'Tags': 'Grid,API',
        'Estimate': 3.5,
        'Assignee': 'Robert King',
        'RankId': 3
    },
    {
        'Id': 14,
        'Status': 'InProgress',
        'Summary': 'Add responsive support to application',
        'Type': 'Epic',
        'Priority': 'Critical',
        'Tags': 'Responsive',
        'Estimate': 6,
        'Assignee': 'Laura Callahan',
        'RankId': 3
    },
    {
        'Id': 15,
        'Status': 'Open',
        'Summary': 'Show the retrieved data from the server in grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Database,SQL',
        'Estimate': 5.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 4
    },
    {
        'Id': 16,
        'Status': 'InProgress',
        'Summary': 'Fix cannot open user’s default database SQL error.',
        'Priority': 'Critical',
        'Type': 'Bug',
        'Tags': 'Database,Sql2008',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 17,
        'Status': 'Testing',
        'Summary': 'Fix the issues reported in data binding.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Databinding',
        'Estimate': '3.5',
        'Assignee': 'Janet Leverling',
        'RankId': 4
    },
    {
        'Id': 18,
        'Status': 'Close',
        'Summary': 'Analyze SQL server 2008 connection.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Grid,Sql',
        'Estimate': 2,
        'Assignee': 'Andrew Fuller',
        'RankId': 4
    },
    {
        'Id': 19,
        'Status': 'Validate',
        'Summary': 'Validate databinding issues.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Validation',
        'Estimate': 1.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 1
    },
    {
        'Id': 20,
        'Status': 'Close',
        'Summary': 'Analyze grid control.',
        'Type': 'Story',
        'Priority': 'High',
        'Tags': 'Analyze',
        'Estimate': 2.5,
        'Assignee': 'Margaret hamilt',
        'RankId': 5
    },
    {
        'Id': 21,
        'Status': 'Close',
        'Summary': 'Stored procedure for initial data binding of the grid.',
        'Type': 'Others',
        'Priority': 'Release Breaker',
        'Tags': 'Databinding',
        'Estimate': 1.5,
        'Assignee': 'Steven walker',
        'RankId': 6
    },
    {
        'Id': 22,
        'Status': 'Close',
        'Summary': 'Analyze stored procedures.',
        'Type': 'Story',
        'Priority': 'Release Breaker',
        'Tags': 'Procedures',
        'Estimate': 5.5,
        'Assignee': 'Janet Leverling',
        'RankId': 7
    },
    {
        'Id': 23,
        'Status': 'Validate',
        'Summary': 'Validate editing issues.',
        'Type': 'Story',
        'Priority': 'Critical',
        'Tags': 'Editing',
        'Estimate': 1,
        'Assignee': 'Nancy Davloio',
        'RankId': 1
    },
    {
        'Id': 24,
        'Status': 'Testing',
        'Summary': 'Test editing functionality.',
        'Type': 'Story',
        'Priority': 'Normal',
        'Tags': 'Editing,Test',
        'Estimate': 0.5,
        'Assignee': 'Nancy Davloio',
        'RankId': 5
    },
    {
        'Id': 25,
        'Status': 'Open',
        'Summary': 'Enhance editing functionality.',
        'Type': 'Improvement',
        'Priority': 'Low',
        'Tags': 'Editing',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'RankId': 5
    }
];

Persisting data in server

The modified card data can be persisted in the database using the RESTful web services. All the CRUD operations in the Kanban are done through DataManager. The DataManager has an option to bind all the CRUD related data in server-side.

For your information, the ODataAdaptor persists data in the server as per OData protocol.

In the below section covers how to get the edited data details on the server-side using the UrlAdaptor.

URL adaptor

You can use the UrlAdaptor of DataManager when binding data source for remote data. In the initial load of Kanban, data are fetched from remote data and bound to the Kanban using url property of DataManager.

Using the crudUrl property, the controller action URL can be specified to perform all the CRUD operations at server-side using a single method instead of specifying separate controller action method for CRUD (create, update and delete) operations. The action parameter of crudUrl is used to get the corresponding CRUD action.

The following code example describes the above behavior.

import { Kanban } from '@syncfusion/ej2-kanban';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

let data: DataManager = new DataManager({
    url: "DataSource",
    crudUrl: "UpdateData",
    adaptor: new UrlAdaptor
});
let kanbanObj: Kanban = new Kanban({
    dataSource: data,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    }
});
kanbanObj.appendTo('#Kanban');

The server-side controller code to handle the CRUD operations are as follows.

private NORTHWNDEntities db = new NORTHWNDEntities();
public ActionResult DataSource() {
    var DataSource = db.Tasks.ToList();
    return Json(DataSource, JsonRequestBehavior.AllowGet);
}
public ActionResult UpdateData(EditParams param) {
    if (param.action == "insert" || (param.action == "batch" && param.added != null)) {
        if (param.action == "insert") {
            db.Tasks.Add(param.value);
        } else {
            foreach (var temp in param.added) {
                db.Tasks.Add(temp);
            }
        }
    }
    if (param.action == "update" || (param.action == "batch" && param.changed != null)) {
        if (param.action == "update") {
            Task old = db.Tasks.Where(o => o.Id == param.value.Id).SingleOrDefault();
            if (old != null) {
                db.Entry(old).CurrentValues.SetValues(param.value);
            }
        } else {
            foreach (var temp in param.changed) {
                Task old = db.Tasks.Where(o => o.Id == temp.Id).SingleOrDefault();
                if (old != null) {
                    db.Entry(old).CurrentValues.SetValues(temp);
                }
            }
        }
    }
    if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) {
        if (param.action == "remove") {
            int key = Convert.ToInt32(param.key);
            db.Tasks.Remove(db.Tasks.Where(o => o.Id == key).SingleOrDefault());
        } else {
            foreach (var temp in param.deleted) {
                db.Tasks.Remove(db.Tasks.Where(o => o.Id == temp.Id).SingleOrDefault());
            }
        }
    }
    db.SaveChanges();
    var data = db.Tasks.ToList();
    return Json(data, JsonRequestBehavior.AllowGet);
}

public class EditParams {
    public string key { get; set; }
    public string action { get; set; }
    public List<Tasks> added { get; set; }
    public List<Tasks> changed { get; set; }
    public List<Tasks> deleted { get; set; }
    public Tasks value { get; set; }
}