Vue
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Columns in Vue Kanban component

03 Dec 2021 / 6 minutes to read

The Kanban columns represent the each stage of the process. The column definitions are used as the dataSource schema in the Kanban. The Kanban operations such as drag-and-drop, swimlane, and toggle columns are performed based on column definitions.

Single-key mapping

Kanban columns are categorized by mapping the key from the datasource using the keyField property. The corresponding value in the datasource is mapped inside the columns keyField. Based on this categorization, Kanban columns are split on this board.

The keyField property is mandatory to render the columns in the Kanban board.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings">
          <e-columns>
            <e-column headerText="To Do" keyField="Open"></e-column>
            <e-column headerText="In Progress" keyField="InProgress"></e-column>
            <e-column headerText="Testing" keyField="Testing"></e-column>
            <e-column headerText="Done" keyField="Close"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
  data: function() {
    return {
      kanbanData: extend([], kanbanData, null, true),
      cardSettings: {
        contentField: "Summary",
        headerField: "Id"
      }
    };
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.kanbanData = [
        {
            '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
        }
    ];
});

Multi-key mapping

Kanban board allows to render a single column by mapping multiple keys using keyField property. In below sample, specified the multiple keys(Open, Validate) to a single column.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings">
          <e-columns>
            <e-column headerText="To Do" keyField="Open, Validate"></e-column>
            <e-column headerText="In Progress" keyField="InProgress"></e-column>
            <e-column headerText="Testing" keyField="Testing"></e-column>
            <e-column headerText="Done" keyField="Close"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
  data: function() {
    return {
      kanbanData: extend([], kanbanData, null, true),
      cardSettings: {
        contentField: "Summary",
        headerField: "Id"
      }
    };
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.kanbanData = [
        {
            '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
        }
    ];
});

Header text

You can provide the column header text of Kanban columns using the headerText property. If you have not specified any header text, it will render the header without any text.

Header template

You can customize the column header with any HTML or CSS element using the template property as shown in the following code.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings" cssClass="kanban-header-template">
          <e-columns>
            <e-column headerText="To Do" keyField="Open" :template="columnsTemplate"></e-column>
            <e-column headerText="In Progress" keyField="InProgress" :template="columnsTemplate"></e-column>
            <e-column headerText="Testing" keyField="Testing" :template="columnsTemplate"></e-column>
            <e-column headerText="Done" keyField="Close" :template="columnsTemplate"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
  data: function() {
    return {
      kanbanData: extend([], kanbanData, null, true),
      cardSettings: {
        contentField: "Summary",
        headerField: "Id"
      },
      columnsTemplate: function () {
        return {
          template: Vue.component('columnsTemplate', {
            template: `<div class="header-template-wrap">
                          <div :class="getClassName(data)"></div>
                          <div class="header-text">{{data.headerText}}</div>
                        </div>`,
            data() {
              return {
                data: {}
              };
            },
            methods: {
              getClassName: function(data) {
                return "header-icon e-icons " + data.keyField;
              }
            }
          })
        }
      },
    };
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';

  .kanban-header-template.e-kanban .header-template-wrap {
    display: inline-flex;
    font-size: 15px;
    font-weight: 400;
  }
  
  .kanban-header-template.e-kanban .header-template-wrap .header-icon {
    font-family: 'Kanban priority icons';
    margin-top: 3px;
    width: 10%;
  }
  
  .kanban-header-template.e-kanban .header-template-wrap .header-text {
    margin-left: 15px;
  }
  
  .e-kanban.e-rtl .header-template-wrap .header-text {
    margin-right: 15px;
  }
  
  .kanban-header-template.e-kanban .card-header {
    padding-left: 12px;
  }
  
  .kanban-header-template.e-kanban .Open::before {
    content: '\e700';
    color: #0251cc;
    font-size: 16px;
  }
  
  .kanban-header-template.e-kanban .InProgress::before {
    content: '\e703';
    color: #ea9713;
    font-size: 16px;
  }
  
  .kanban-header-template.e-kanban .Review::before {
    content: '\e701';
    color: #8e4399;
    font-size: 16px;
  }
  
  .kanban-header-template.e-kanban .Close::before {
    content: '\e702';
    color: #63ba3c;
    font-size: 16px;
  }
  
  @font-face {
    font-family: 'Kanban priority icons';
    src:
      url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfUAAAEoAAAAVmNtYXDnE+dkAAABlAAAADxnbHlmg4weAgAAAdwAAAhQaGVhZBfH57sAAADQAAAANmhoZWEIVQQGAAAArAAAACRobXR4FAAAAAAAAYAAAAAUbG9jYQNeBi4AAAHQAAAADG1heHABGAFgAAABCAAAACBuYW1lH65UOQAACiwAAALNcG9zdFsyKlEAAAz8AAAAUgABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAABQABAAAAAQAA7pb8lF8PPPUACwQAAAAAANpY0WMAAAAA2ljRYwAAAAAD+AP4AAAACAACAAAAAAAAAAEAAAAFAVQACQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAwQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAEAAQAAQAA5wP//wAA5wD//wAAAAEABAAAAAEAAgADAAQAAAAAAMwCBgKSBCgABAAAAAAD+AP4ACEAQwBlAKkAAAEfBw8HIS8HPwclHwcPByEvBz8HJR8HDwchLwc/BycRHw8hPw8RLw8hDw4CXgcGBQUEAwEBAQEDBAUFBgf+hgYGBQUEAwEBAQEDBAUFBgYCOAYGBQUEAwEBAQEDBAUFBgb9yAYGBQUEAwEBAQEDBAUFBgYCOAYGBQUEAwEBAQEDBAUFBgb9yAYGBQUEAwEBAQEDBAUFBgbcAQIDBQUHCAkKCgsMDQ0ODQLgDQ4NDQwLCgoJCAcFBQMCAQECAwUFBwgJCgoLDA0NDg39IA0ODQ0MCwoKCQgHBQUDAgFDAQEDBAUFBgYHBgUFBAMBAQEBAwQFBQYHBgYFBQQDAQG9AQEDBAUFBgcGBgUFBAMBAQEBAwQFBQYGBwYFBQQDAQG9AQEDBAUFBgYHBgUFBAMBAQEBAwQFBQYHBgYFBQQDAQGz/SANDg0NDAsKCgkIBwUFAwIBAQIDBQUHCAkKCgsMDQ0ODQLgDQ4NDQwLCgoJCAcFBQMCAQECAwUFBwgJCgoLDA0NDgAABAAAAAAD+AP4AD8AggDUARgAAAEfBw8PLw41Pw8fBicPDx8PMz8OLxAHNzMfEhUPESsBLxA9AT8UJREfDyE/DxEvDyEPDgJlCAcGBgQCAgEBAgMEBQcHCAkJCwsMDAwNDgwNDAsLCgkICAYFAwMBAQMDBQUHBwgJCQoLCwwMDA4MDAwLCgqEDg8PDw4PDw8VFBQUExMTEhUWFhYXFxgYEhMSERISEREUEBEREBESERkZGRgXFxcXEA8QEBAREREWFxYVFhUWFhIeFAsXGBkYGRkYGSATExISEhIRBQMBAgICHBkaGhscGx0UExMTExMTExoUFRQVFBUVHBoaGhkYGRkEAgIDGBQVFhYXFxcREREQEREQEQ8ODv4aAQIDBQUHCAkKCgsMDQ0ODQLgDQ4NDQwLCgoJCAcFBQMCAQECAwUFBwgJCgoLDA0NDg39IA0ODQ0MCwoKCQgHBQUDAgJXCQoKCwsMDAwNDAwMCgsJCQgHBgUEAwIBAQIDBQUHCAkJCgsMCw0MDQwLDAoLCQkJBwcGBQQCAgEBAgMEBQYIWQMEBQYGBwgJDg4PERETExUYFxUTEhAPDgkIBwUFAwEBAgIEBQYHCA0QEBMUFhcaEREQDw8NDQ0PDQsJCAYEAwEBMAIEBggJDA4PFg8PERESFBQHBwYGBgUEIBsZFhUTERAJCAYGBAMCAgQFBggJChAREhUWGBoeCAUFBAYHGxcVFBMREQ8KCQgHBgYEBAMCAYT9IA0ODQ0MCwoKCQgHBQUDAgEBAgMFBQcICQoKCwwNDQ4NAuANDg0NDAsKCgkIBwUFAwIBAQIDBQUHCAkKCgsMDQ0OAAIAAAAAA/gD+AArAG8AAAEfAhUPAwEPAy8INT8GMx8DAT8DHwIlER8PIT8PES8PIQ8OAvMEAwIBAQME/r8FBQYGBgYFBXkEAwEBAgMEBQUGBgYGBgViASoFBgYGBgYF/RoBAgMFBQcICQoKCwwNDQ4NAuANDg0NDAsKCgkIBwUFAwIBAQIDBQUHCAkKCgsMDQ0ODf0gDQ4NDQwLCgoJCAcFBQMCArQFBgYGBgYFBf7FBAMBAQEBAwR2BQUGBgYGBgUEAwEBAgMEYAElBAMBAQEBA7j9IA0ODQ0MCwoKCQgHBQUDAgEBAgMFBQcICQoKCwwNDQ4NAuANDg0NDAsKCgkIBwUFAwIBAQIDBQUHCAkKCgsMDQ0OAAAJAAAAAAP4A/gAIQBDAGUAhwCpAMsA7QEPAVMAAAEVDwcvBzU/Bx8GNx8EDwYrAS8GPQE/BTsBHwEFHwMPBysBLwU9AT8GOwEfASUfBw8HIy8HPwchHwcPByMvBz8HJR8DDwcrAS8FPQE/BjsBHwEFHwMdAQ8FKwEvBz8GOwEfASUVDwcvBzU/Bx8GJREfDyE/DxEvDyEPDgIgAQIDBAQGBgYGBgYEBAMCAQECAwQEBgYGBgYGBAQDAopiBAMCAQECAwQFBQYGBgYFBWIEAwICAwQFBQYGBgYF/t8EAwIBAQIDBGIFBQYGBgYFBQQDAgIDBGIFBQYGBgYFAdwHBgUFBAMBAQEBAwQFBQYHigYGBgQEAwIBAQIDBAQGBgb+YAYGBgQEAwIBAQIDBAQGBgaKBwYFBQQDAQEBAQMEBQUGBwJlBAMCAQECAwRiBQUGBgYGBQUEAwICAwRiBQUGBgYGBf4bYgQDAgIDBAUFBgYGBgUFYgQDAgEBAgMEBQUGBgYGBQEEAQIDBAQGBgYGBgYEBAMCAQECAwQEBgYGBgYGBAQDAv3pAQIDBQUHCAkKCgsMDQ0ODQLgDQ4NDQwLCgoJCAcFBQMCAQECAwUFBwgJCgoLDA0NDg39IA0ODQ0MCwoKCQgHBQUDAgEwigcGBQUEAwEBAQEDBAUFBgeKBgYGBAQDAgEBAgMEBAYGTWIFBQYGBgYFBQQDAgIDBGIFBQYGBgYFBQQDAgIDBAUFBgYGBgUFYgQDAgIDBAUFBgYGBgUFYgQDAgIDmQECAwQEBgYGBgYGBAQDAgEBAgMEBAYGBgYGBgQEAwIBAQIDBAQGBgYGBgYEBAMCAQECAwQEBgYGBgYGBAQDAgHrBQUGBgYGBQViBAMCAgMEBQUGBgYGBQViBAMCAgMEYgUFBgYGBgUFBAMCAgMEYgUFBgYGBgUFBAMCAgNLigYGBgQEAwIBAQIDBAQGBgaKBwYFBQQDAQEBAQMEBQUGD/0gDQ4NDQwLCgoJCAcFBQMCAQECAwUFBwgJCgoLDA0NDg0C4A0ODQ0MCwoKCQgHBQUDAgEBAgMFBQcICQoKCwwNDQ4AAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEAFQABAAEAAAAAAAIABwAWAAEAAAAAAAMAFQAdAAEAAAAAAAQAFQAyAAEAAAAAAAUACwBHAAEAAAAAAAYAFQBSAAEAAAAAAAoALABnAAEAAAAAAAsAEgCTAAMAAQQJAAAAAgClAAMAAQQJAAEAKgCnAAMAAQQJAAIADgDRAAMAAQQJAAMAKgDfAAMAAQQJAAQAKgEJAAMAAQQJAAUAFgEzAAMAAQQJAAYAKgFJAAMAAQQJAAoAWAFzAAMAAQQJAAsAJAHLIEthbmJhbiBwcmlvcml0eSBpY29uc1JlZ3VsYXJLYW5iYW4gcHJpb3JpdHkgaWNvbnNLYW5iYW4gcHJpb3JpdHkgaWNvbnNWZXJzaW9uIDEuMEthbmJhbiBwcmlvcml0eSBpY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAASwBhAG4AYgBhAG4AIABwAHIAaQBvAHIAaQB0AHkAIABpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgBLAGEAbgBiAGEAbgAgAHAAcgBpAG8AcgBpAHQAeQAgAGkAYwBvAG4AcwBLAGEAbgBiAGEAbgAgAHAAcgBpAG8AcgBpAHQAeQAgAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAASwBhAG4AYgBhAG4AIABwAHIAaQBvAHIAaQB0AHkAIABpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQECAQMBBAEFAQYACFRvZG9saXN0BlJldmlldwlDb21wbGV0ZWQIUHJvZ3Jlc3MAAAAA) format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  [class^="sf-icon-"],
  [class*=" sf-icon-"] {
    font-family: 'Kanban priority icons' !important;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.kanbanData = [
        {
            '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
        }
    ];
});

Toggle columns

Kanban allows to expand or collapse its columns using allowToggle inside the columns property. When enable the property, it will render the expand or collapse icon to the column header.

By default, collapsed column width is set to 50px.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings">
          <e-columns>
            <e-column headerText="To Do" keyField="Open" allowToggle="true"></e-column>
            <e-column headerText="In Progress" keyField="InProgress" allowToggle="true"></e-column>
            <e-column headerText="Testing" keyField="Testing" allowToggle="true"></e-column>
            <e-column headerText="Done" keyField="Close" allowToggle="true"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
  data: function() {
    return {
      kanbanData: extend([], kanbanData, null, true),
      cardSettings: {
        contentField: "Summary",
        headerField: "Id"
      }
    };
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.kanbanData = [
        {
            '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
        }
    ];
});

Initially collapsed column

By default, all columns are on expanded state when loading the Kanban board initially. But, you can render the columns with collapsed state using the isExpanded property.

The isExpanded property only works when enabling the allowToggle property on particular column.

In the following example, the backlog column is collapsed on initialization of Kanban board.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings">
          <e-columns>
            <e-column headerText="To Do" keyField="Open" allowToggle="true" isExpanded="false"></e-column>
            <e-column headerText="In Progress" keyField="InProgress" allowToggle="true"></e-column>
            <e-column headerText="Testing" keyField="Testing" allowToggle="true" isExpanded="false"></e-column>
            <e-column headerText="Done" keyField="Close" allowToggle="true"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
  data: function() {
    return {
      kanbanData: extend([], kanbanData, null, true),
      cardSettings: {
        contentField: "Summary",
        headerField: "Id"
      }
    };
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.kanbanData = [
        {
            '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
        }
    ];
});

Stacked headers

Stacked headers are the additional headers to column header that will group the similar columns.

Define the grouping of columns key value to the keyFields property and provide the custom header text name to grouped columns using the text property, which is placed inside the stackedHeaders property.

In the following code, the kanban columns ‘InProgress, Review’ are grouped under ‘Development Phase’ category.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings">
          <e-columns>
            <e-column headerText="Open" keyField="Open"></e-column>
            <e-column headerText="In Progress" keyField="InProgress"></e-column>
            <e-column headerText="In Review" keyField="Review"></e-column>
            <e-column headerText="Completed" keyField="Close"></e-column>
          </e-columns>
          <e-stackedHeaders>
                <e-stackedHeader text= 'To Do' keyFields= 'Open'></e-stackedHeader>
                <e-stackedHeader text= 'Development Phase' keyFields= 'InProgress, Review'></e-stackedHeader>
                <e-stackedHeader text= 'Done' keyFields= 'Close'></e-stackedHeader>
            </e-stackedHeaders>
        </ejs-kanban>
  </div>
</template>

<script>
import Vue from "vue";
import { KanbanPlugin } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
Vue.use(KanbanPlugin);
export default {
  data: function() {
    return {
      kanbanData: extend([], kanbanData, null, true),
      cardSettings: {
        contentField: "Summary",
        headerField: "Id"
      }
    };
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.kanbanData = [
        {
            '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
        }
    ];
});
Previous
Next