ejKanban
7 Aug 201824 minutes to read
The Kanban can be easily configured to the DOM element, such as div. You can create a Kanban with a highly customizable look and feel.
Syntax
$(element).ejKanban();Example
<div id="Kanban"></div>
<script>
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
// Create Kanban
$("#Kanban").ejKanban({
dataSource: window.kanban,
keyField:"Status",
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
]
});
</script>Requires
- module:jQuery
- module:jsrender.min.js
- module:ej.globalize.min.js
- module:ej.core.min.js
- module:ej.data.min.js
- module:ej.touch.min.js
- module:ej.draggable.min.js
- module:ej.kanban.min.js
- module:ej.scroller.min.js
- module:ej.waitingpopup.min.js
- module:ej.button.min.js
- module:ej.dialog.min.js
- module:ej.dropdownlist.min.js
- module:ej.datepicker.min.js
- module:ej.datetimepicker.min.js
- module:ej.editor.min.js
- module:ej.checkbox.min.js
- module:ej.tab.min.js
- module:ej.splitbutton.js
- module:ej.rte.min.js
- module:ej.toolbar.min.js
- module:ej.menu.min.js
Members
allowDragAndDrop boolean
Gets or sets a value that indicates whether to enable allowDragAndDrop behavior on Kanban.
Default Value
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
});
});
</script>allowExternalDragAndDrop boolean
Gets or sets a value that indicates whether to enable drag and drop behavior between Kanban controls.
Default Value
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowExternalDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
});
});
</script>allowTitle boolean
To enable or disable the title of the card.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
allowTitle: true,
fields: {
primaryKey: "Id",
content: "Summary",
},
});
});
</script>swimlaneSettings Object
Customize the settings for swim lane.
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings: {
showCount: true
},
});
});
</script>swimlaneSettings.showCount boolean
To enable or disable items count in swim lane.
Default Value:
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings: {
showCount: true
},
});
});
</script>swimlaneSettings.allowDragAndDrop boolean
To enable or disable DragAndDrop across swim lane.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings:{
allowDragAndDrop: true,
},
});
});
</script>swimlaneSettings.showEmptySwimlane boolean
To enable or disable empty swimlane on Kanban board. It is used to shown empty swimlane when no data’s present on headers key mapping value.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings:{
showEmptySwimlane: true,
headers: [{ text: 'Andrew Fuller', key: 'Andrew' },
{ text: 'Janet', key: 'Janet' }]
},
});
});
</script>swimlaneSettings.headers Array
Gets or sets an object that indicates to render the swimlane rows with specified swimlane headers.
Default Value:
- []
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings:{
showEmptySwimlane: true,
headers: [{ text: 'Andrew Fuller', key: 'Andrew' },
{ text: 'Janet', key: 'Janet' }]
},
});
});
</script>swimlaneSettings.headers.text string
Gets or sets a value that indicates to render the Kanban with specified swimlane header text.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings:{
showEmptySwimlane: true,
headers: [{ text: 'Andrew Fuller', key: 'Andrew' },
{ text: 'Janet', key: 'Janet' }]
},
});
});
</script>swimlaneSettings.headers.key string
Gets or sets a value that indicates to render the Kanban with specified swimlane header key.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings:{
showEmptySwimlane: true,
headers: [{ text: 'Andrew Fuller', key: 'Andrew' },
{ text: 'Janet', key: 'Janet' }]
},
});
});
</script>swimlaneSettings.unassignedGroup Object
Customize the settings for unassigned category of swim lane.
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings:{
unassignedGroup:{
enable:true
}
},
});
});
</script>swimlaneSettings.unassignedGroup.enable boolean
To enable or disable unassigned category change with swim lane key values.
Default Value:
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings:{
unassignedGroup:{
enable:true
}
},
});
});
</script>swimlaneSettings.unassignedGroup.keys Array
To set the user defined values which are need to categorized as unassigned category swim lane groups.
Default Value:
- [“null”,”undefined”,””]
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
allowDragAndDrop: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
swimlaneSettings:{
unassignedGroup:{
enable:true,
keys:["",null],
}
},
});
});
</script>allowToggleColumn boolean
To enable or disable the column expand /collapse.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
allowToggleColumn: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
});
});
</script>allowSearching boolean
To enable Searching operation in Kanban.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
allowSearching: true,
});
});
</script>allowFiltering boolean
To enable filtering behavior on Kanban.User can specify query in filterSettings collection after enabling allowFiltering.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Janet" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
isResponsive:true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
allowTitle: true,
allowFiltering:true,
keyField: "Status",
filterSettings: [
{ text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet Leverling'" },
{ text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
],
fields: {
primaryKey: "Id",
content: "Summary",
imageUrl: "ImgUrl"
},
});
});
</script>allowSelection boolean
Gets or sets a value that indicates whether to enable allowSelection behavior on Kanban.User can select card and the selected card will be highlighted on Kanban.
Default Value:
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
allowSelection: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
});
});
</script>allowHover boolean
Gets or sets a value that indicates whether to allow card hover actions.
Default Value
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
allowHover: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
});
});
</script>allowKeyboardNavigation boolean
To allow keyboard navigation actions.
Default Value
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
allowKeyboardNavigation: true,
columns: [
{ headerText: "Backlog", key: "Open"},
{ headerText: "In Progress", key: "InProgress"},
{ headerText: "Testing", key: "Testing"},
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
content: "Summary",
primaryKey: "Id"
},
});
});
</script>allowScrolling boolean
Gets or sets a value that indicates whether to enable the scrollbar in the Kanban and view the card by scroll through the Kanban manually.
Default Value
- false
Example
<div id="kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
{ Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
keyField: "Status",
allowScrolling: true,
scrollSettings: {
height: 400,
width: 700
}
}
);
});
</script>allowPrinting boolean
Gets or sets a value that indicates whether to enable printing option.
Default Value:
- false
Example
<div id="kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
fields: {
primaryKey: "Id",
content: "Summary",
},
keyField: "Status",
allowPrinting: true,
}
);
});
</script>contextMenuSettings Object
Gets or sets an object that indicates whether to customize the context menu behavior of the Kanban.
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
contextMenuSettings: {
enable: true,
}
});
});
</script>contextMenuSettings.enable boolean
To enable context menu.All default context menu will show.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
contextMenuSettings: {
enable: true
}
});
});
</script>contextMenuSettings.disableDefaultItems Array
Gets or sets a value that indicates the list of items needs to be disable from default context menu items.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
contextMenuSettings: {
enable: true,
disableDefaultItems: [ej.Kanban.MenuItem.MoveLeft]
}
});
});
</script>contextMenuSettings.menuItems Array
Its used to add specific default context menu items.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
contextMenuSettings: {
enable: true,
menuItems:["Move Right","Move Left"],
}
});
});
</script>contextMenuSettings.customMenuItems Array
Gets or sets a value that indicates whether to add custom contextMenu items.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
contextMenuSettings: {
enable: true,
customMenuItems: [
{ text: "Menu1" },
{ text: "Menu2", target: ej.Kanban.Target.Header }
],
}
});
});
</script>contextMenuSettings.customMenuItems.target enum
Its sets target element to custom context menu item.
| Name | Description |
|---|---|
| Header | Sets context menu to Kanban header |
| Content | Sets context menu to Kanban content |
| Card | Sets context menu to Kanban card |
| All | Sets context menu to Kanban |
Default Value
- ej.Kanban.Target.All
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
contextMenuSettings: {
enable: true,
customMenuItems: [
{ text: "Menu1", target: ej.Kanban.Target.Card },
{ text: "Menu2", target: ej.Kanban.Target.Header }
],
}
});
});
</script>contextMenuSettings.customMenuItems.text string
Gets the display name to custom menu item.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
contextMenuSettings: {
enable: true,
customMenuItems: [
{ text: "Menu1" },
{ text: "Menu2" }
]
}
});
});
</script>contextMenuSettings.customMenuItems.template string
Gets the template to render custom context menu item.
Default Value:
- null
Example
<div id="Kanban"></div>
<ul id="template">
<li><a>Backlog</a></li>
<li><a>Testing</a></li>
</ul>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
contextMenuSettings: {
enable: true,
customMenuItems: [
{ text: "Hide Column", template: "#template" },
],
}
});
});
</script>columns Array
Gets or sets an object that indicates to render the Kanban with specified columns.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
{ Id: 6, Status: "Testing", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
fields: {
primaryKey: "Id",
content: "Summary",
},
keyField: "Status"
}
);
});
</script>columns.headerText string
Gets or sets an object that indicates to render the Kanban with specified columns header text.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
fields: {
primaryKey: "Id",
content: "Summary",
},
keyField: "Status"
}
);
});
</script>columns.totalCount Object
To customize the totalCount properties.
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
enableTotalCount: true,
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open",totalCount:{text:"OpenCount"}},
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>columns.totalCount.text string
To customize the totalCount text properties.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
enableTotalCount: true,
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open",totalCount:{text:"Backlog Count"}},
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>columns.key string/number
Gets or sets an object that indicates to render the Kanban with specified columns key.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
fields: {
primaryKey: "Id",
content: "Summary",
},
keyField: "Status"
}
);
});
</script>columns.allowDrop boolean
To enable/disable allowDrop for specific column wise.
Default Value
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanbanPizzaData=[
{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
]
$(function() {
var data = ej.DataManager(window.kanbanPizzaData)
$("#Kanban").ejKanban(
{
dataSource: data,
workflows:[
{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
{key:"Ready to Serve",allowedTransitions:"Served"},
{key:"Ready to Deliver",allowedTransitions:"Delivered"}
],
enableTotalCount:true,
allowToggleColumn:true,
columns: [
{ headerText: "Order", key: "Order",allowDrop:false},
{ headerText: "Ready to Serve", key: "Ready to Serve"},
{ headerText: "Home Delivery", key: "Ready to Deliver" },
{ headerText: "Served or Delivered", key: "Delivered,Served"}
],
keyField: "Category",
allowTitle: true,
fields: {
content: "Description",
primaryKey: "Id",
title:"Title",
color: "Size",
imageUrl: "ImageURL"
},
});
});
</script>columns.allowDrag boolean
To enable/disable allowDrag for specific column wise.
Default Value
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanbanPizzaData=[
{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
]
$(function() {
var data = ej.DataManager(window.kanbanPizzaData)
$("#Kanban").ejKanban(
{
dataSource: data,
workflows:[
{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
{key:"Ready to Serve",allowedTransitions:"Served"},
{key:"Ready to Deliver",allowedTransitions:"Delivered"}
],
enableTotalCount:true,
allowToggleColumn:true,
columns: [
{ headerText: "Order", key: "Order"},
{ headerText: "Ready to Serve", key: "Ready to Serve"},
{ headerText: "Home Delivery", key: "Ready to Deliver" },
{ headerText: "Served or Delivered", key: "Delivered,Served",allowDrag:false }
],
keyField: "Category",
allowTitle: true,
fields: {
content: "Description",
primaryKey: "Id",
title:"Title",
color: "Size",
imageUrl: "ImageURL"
},
});
});
</script>columns.isCollapsed boolean
To set column collapse or expand state
Default Value
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
allowToggleColumn: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing", isCollapsed: true }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
});
});
</script>columns.constraints Object
To customize the column level constraints with minimum ,maximum limit validation.
Default Value
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Done", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
enableTotalCount: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress", constraints: { min: 1, max: 2 }, },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
allowTitle: true,
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>columns.constraints.type string
It is used to specify the type of constraints as column or swimlane.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress", constraints: { type: ej.Kanban.Type.Swimlane, min: 1, max: 2 }, },
{ headerText: "Testing", key: "Testing", constraints: { type: ej.Kanban.Type.Column, max: 2 }, },
{ headerText: "Done", key: "Close" },
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
}
);
});
</script>columns.constraints.min number
It is used to specify the minimum amount of card in particular column cell or swimlane cell can hold.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress", constraints: { type: ej.Kanban.Type.Swimlane, min: 1, max: 2 }, },
{ headerText: "Testing", key: "Testing", constraints: { type: ej.Kanban.Type.Column, max: 2 }, },
{ headerText: "Done", key: "Close" },
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
}
);
});
</script>columns.constraints.max number
It is used to specify the maximum amount of card in particular column cell or swimlane cell can hold.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress", constraints: { type: ej.Kanban.Type.Swimlane, min: 1, max: 2 }, },
{ headerText: "Testing", key: "Testing", constraints: { type: ej.Kanban.Type.Column, max: 2 }, },
{ headerText: "Done", key: "Close" },
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
}
);
});
</script>columns.headerTemplate string
Gets or sets a value that indicates to add the template within the header element.
Default Value
- null
Example
<div id="Kanban"></div>
<div id="calender">
<span class="e-calender e-icon headericon"></span>
In Progress
</div>
<div id="login">
<span class="e-userlogin e-icon employee"></span>
Testing
</div>
<div id="image">
<img src="themes/images/kanban/9.png">
Done
</div>
<style type="text/css">
img {
height: 14px;
width: 14px;
}
</style>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" },
{ Id: 3, Status: "Close", Summary: "Task 3", Assignee: "Andrew" },
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress", headerTemplate: "#calender" },
{ headerText: "Testing", key: "Testing", headerTemplate: "#login" },
{ headerText: "Done", key: "Close", headerTemplate: "#image" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
});
});
</script>columns.width string/number
Gets or sets an object that indicates to render the Kanban with specified columns width.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open", width: 200 },
{ headerText: "Validated", key: "Validate", width: 200 },
{ headerText: "Testing", key: "Testing", width: 200 },
{ headerText: "Done", key: "Close", width: 200 }
],
fields: {
primaryKey: "Id",
content: "Summary"
},
keyField: "Status"
}
);
});
</script>columns.visible boolean
Gets or sets an object that indicates to set specific column visibility.
Default Value:
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing", visible: false },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
}
);
});
</script>columns.showAddButton boolean
Gets or sets an object that indicates whether to show add new button.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open", showAddButton: true },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String, validationRules: { required: true, number: true } },
{ field: "Status", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea, validationRules: { required: true } }
],
allowEditing: true,
allowAdding: true
},
});
});
</script>cardSettings Object
Gets or sets an object that indicates whether to Customize the card settings.
Default Value
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
{ Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew", Type: "Improvement" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Type: "Issue", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
color: "Type",
},
cardSettings: {
colorMapping: {
"#cb2027": "Issue,Story",
"#67ab47": "Improvement",
"#fbae19": "Epic",
"#6a5da8": "UG"
}
}
});
});
</script>cardSettings.template string
Gets or sets a value that indicates to add the template for card .
Default Value:
- null
Example
<div id="Kanban"></div>
<script id="template" type="text/x-jsrender">
<table>
<tr>
<td class="photo">
<img src="../themes/images/kanban/.png">
</td>
<td class="details">
<table>
<colgroup>
<col width="30%">
<col width="70%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">Name: </td>
<td></td>
</tr>
<tr>
<td class="CardHeader">Task: </td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</script>
<style type="text/css">
.details > table {
margin-left: 10px;
border-collapse: separate;
border-spacing: 7px;
width: 100%;
}
.photo {
padding-left: 6px;
}
.CardHeader {
font-weight: bolder;
}
</style>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
{ Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew", Type: "Improvement" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Type: "Issue", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
cardSettings: {
template: "#template",
}
});
});
</script>cardSettings.colorMapping Object
To customize the card border color based on assigned task. Colors and corresponding values defined here will be mapped with colorField mapped data source column.
Default Value
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
{ Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew", Type: "Improvement" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Type: "Issue", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
color: "Type",
},
cardSettings: {
colorMapping: {
"#cb2027": "Issue,Story",
"#67ab47": "Improvement",
"#fbae19": "Epic",
"#6a5da8": "UG"
}
},
});
});
</script>cardSettings.externalDropTarget string
This specifies the Kanban card to drop into particular target element.
Default Value
- ””
Example
<div id="Kanban"></div>
<div id="DroppedKanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
{ Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew", Type: "Improvement" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
];
window.droppedKanban=[
{ Status: "Open", Id: "8", Summary: "Fix the issues reported in safari browser."},
{ Status: "InProgress", Id: "10", Summary: "Arrange a web meeting with the customer to get the login page requirements." },
{ Status: "Close", Id: "11", Summary: "Login page validation."},
];
$(function () {
var data = ej.DataManager(window.kanban)
var droppedData = ej.DataManager(window.droppedKanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
allowExternalDragAndDrop: true,
cardSettings:{
externalDropTarget: "#DroppedKanban"
},
});
$("#DroppedKanban").ejKanban(
{
dataSource: droppedData,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
allowTitle: true,
fields: {
content: "Summary",
primaryKey: "Id"
},
});
});
</script>customToolbarItems Array
Gets or sets a value that indicates whether to add customToolbarItems within the toolbar to perform any action in the Kanban.
Default Value:
- []
Example
<div id="Kanban"></div>
<script id="Delete" type="text/x-jsrender">
<a class="e-customdelete e-icon" />
</script>
<style type="text/css" class="cssStyles">
.e-customdelete:before {
content: "\e800";
line-height: 26px;
min-height: 26px;
min-width: 14px;
display: inline-block;
}
</style>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
customToolbarItems: [
{
template: "#Delete"
}
],
fields: {
primaryKey: "Id",
content: "Summary"
},
toolbarClick: function (args) {
if (args.itemName == "Delete" && this.element.find(".e-kanbancard").hasClass("e-cardselection")) {
var selected = this.element.find(".e-cardselection");
this.KanbanEdit.deleteCard(selected.attr("id"));
}
}
});
});
</script>customToolbarItems.template string
Gets the template to render customToolbarItems.
Default Value:
- null
Example
<div id="Kanban"></div>
<script id="Delete" type="text/x-jsrender">
<a class="e-customdelete e-icon" />
</script>
<style type="text/css" class="cssStyles">
.e-customdelete:before {
content: "\e800";
line-height: 26px;
min-height: 26px;
min-width: 14px;
display: inline-block;
}
</style>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Close", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
customToolbarItems: [
{
template: "#Delete"
}
],
fields: {
primaryKey: "Id",
content: "Summary"
},
toolbarClick: function (args) {
if (args.itemName == "Delete" && this.element.find(".e-kanbancard").hasClass("e-cardselection")) {
var selected = this.element.find(".e-cardselection");
this.KanbanEdit.deleteCard(selected.attr("id"));
}
}
});
});
</script>cssClass string
Gets or sets a value that indicates to render the Kanban with custom theme.
Default Value:
- ””
Example
<div id="Kanban"></div>
<style type="text/css">
.gradient-green {
font-family: cursive;
}
.gradient-green .e-swimlanerow {
background: none repeat scroll 0 0 #71A409;
}
</style>
<script>
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
cssClass: "gradient-green",
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" }
],
fields: {
primaryKey: "Id",
content: "Summary"
},
keyField: "Status"
}
);
});
</script>dataSource Object
Gets or sets the data to render the Kanban with cards.
Default Value:
- null
Example
<div id="kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" }
],
fields: {
primaryKey: "Id",
content: "Summary"
},
keyField: "Status"
}
);
});
</script>enableTouch boolean
To perform kanban functionalities with touch interaction.
Default Value:
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
enableTouch:false,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
}
});
});
</script>enableRTL boolean
Align content in the Kanban control align from right to left by setting the property as true.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
enableRTL: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>enableTotalCount boolean
To show total count of cards in each column.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
enableTotalCount: true,
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>editSettings Object
Get or sets an object that indicates whether to customize the editing behavior of the Kanban.
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
actionComplete: "complete",
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }
],
allowEditing: true,
allowAdding: true
}
}
);
});
</script>editSettings.allowEditing boolean
Gets or sets a value that indicates whether to enable the editing action in cards of Kanban.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
actionComplete: "complete",
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }
],
allowEditing: true
}
}
);
});
</script>editSettings.allowAdding boolean
Gets or sets a value that indicates whether to enable the adding action in cards behavior on Kanban.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
actionComplete: "complete",
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }
],
allowAdding: true
}
}
);
});
</script>editSettings.dialogTemplate string
This specifies the id of the template which is require to be edited using the Dialog Box.
Default Value:
- null
Example
<div id="Kanban"></div>
<script id="template" type="text/template">
<table>
<tr>
<td style="text-align: right;">Id
</td>
<td style="text-align: left">
<input id="Id" name="Id" value="" class="e-field e-ejinputtext valid e-disable" disabled="disabled" />
</td>
<td style="text-align: right;">Status
</td>
<td style="text-align: left">
<input id="Status" name="Status" value="" class="e-field e-ejinputtext valid" />
</td>
</tr>
</table>
</script>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.DialogTemplate,
dialogTemplate: "#template",
allowEditing: true,
allowAdding: true
},
}
);
})
</script>editSettings.editMode enum
Get or sets an object that indicates whether to customize the editMode of the Kanban.
| Name | Description |
|---|---|
| Dialog | Creates Kanban with editMode as Dialog |
| DialogTemplate | Creates Kanban with editMode as DialogTemplate |
| ExternalForm | Creates Kanban with editMode as ExternalForm |
| ExternalFormTemplate | Creates Kanban with editMode as ExternalFormTemplate |
Default Value:
- ej.Kanban.EditMode.Dialog
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
editSettings: {
editMode: ej.Kanban.EditMode.Dialog,
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.String },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
allowEditing: true,
allowAdding: true
},
}
);
})
</script>editSettings.editItems Array
Get or sets an object that indicates whether to customize the editing fields of Kanban card.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.Dialog,
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.String },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
allowEditing: true,
allowAdding: true
}
}
);
})
</script>editSettings.editItems.field string
It is used to map editing field from the data source.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.Dialog,
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.String },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
allowEditing: true,
allowAdding: true
}
}
);
})
</script>editSettings.editItems.editType enum
It is used to set the particular editType in the card for editing.
| Name | Description |
|---|---|
| String | Allows to set edit type as string edit type |
| Numeric | Allows to set edit type as numeric edit type |
| Dropdown | Allows to set edit type as drop down edit type |
| DatePicker | Allows to set edit type as date picker edit type |
| DateTimePicker | Allows to set edit type as date time picker edit type |
| TextArea | Allows to set edit type as text area edit type |
| RTE | Allows to set edit type as RTE edit type |
Default Value:
- ej.Kanban.EditingType.String
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.Dialog,
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.String },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
allowEditing: true,
allowAdding: true
}
}
);
})
</script>editSettings.editItems.validationRules Object
Gets or sets a value that indicates to define constraints for saving data to the database.
Default Value
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.Dialog,
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String, validationRules: { required: true, number: true } },
{ field: "Status", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea, validationRules: { required: true } }
],
allowEditing: true,
allowAdding: true
}
}
);
})
</script>editSettings.editItems.editParams Object
It is used to set the particular editparams in the card for editing.
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
actionComplete: "complete",
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.Dialog,
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.String },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
allowEditing: true,
allowAdding: true
}
}
);
})
</script>editSettings.editItems.defaultValue string/number
It is used to specify defaultValue for the fields while adding new card.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.Dialog,
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String, validationRules: { required: true, number: true } },
{ field: "Status", editType: ej.Kanban.EditingType.String, defaultValue: "Open" },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea, validationRules: { required: true } }],
allowEditing: true,
allowAdding: true
}
}
);
})
</script>editSettings.externalFormTemplate string
This specifies the id of the template which is require to be edited using the External edit form.
Default Value:
- null
Example
<div id="Kanban"></div>
<script id="template" type="text/template">
<table>
<tr>
<td style="text-align: right;">Id
</td>
<td style="text-align: left">
<input id="Id" name="Id" value="" class="e-field e-ejinputtext valid e-disable" disabled="disabled" />
</td>
<td style="text-align: right;">Status
</td>
<td style="text-align: left">
<input id="Status" name="Status" value="" class="e-field e-ejinputtext valid" />
</td>
</tr>
</table>
</script>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.ExternalFormTemplate,
externalFormTemplate: "#template",
allowEditing: true,
allowAdding: true
}
}
);
})
</script>editSettings.formPosition enum
This specifies to set the position of an External edit form either in the right or bottom of the Kanban.
Default Value:
- ej.Kanban.FormPosition.Bottom
| Name | Description |
|---|---|
| Bottom | Form position is bottom. |
| Right | Form position is right. |
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban)
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
editSettings: {
editMode: ej.Kanban.EditMode.ExternalForm,
formPosition: ej.Kanban.FormPosition.Bottom,
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.String },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }],
allowEditing: true,
allowAdding: true
}
}
);
})
</script>fields Object
To customize field mappings for card , editing title and control key parameters
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG", Tags: "Analyze,Requirements", ImgUrl: "../themes/images/kanban/1.png" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Type: "Issue", Tags: "Improvement,Performance", ImgUrl: "../themes/images/kanban/2.png" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Type: "Improvement", Tags: "Improvement,Performance", ImgUrl: "../themes/images/kanban/2.png" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Type: "UG", Tags: "Analyze,Requirements", ImgUrl: "../themes/images/kanban/1.png" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Janet", Type: "Epic", Tags: "Meeting,Requirements", ImgUrl: "../themes/images/kanban/3.png" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
tag: "Tags",
title: "Id",
color: "Type",
imageUrl: "ImgUrl",
},
cardSettings: {
colorMapping: {
"#cb2027": "Issue,Story",
"#67ab47": "Improvement",
"#fbae19": "Epic",
"#6a5da8": "UG"
}
}
});
});
</script>fields.primaryKey string
The primarykey field is mapped to data source field. And this will used for Drag and drop and editing mainly.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
});
});
</script>fields.swimlaneKey string
To enable swimlane grouping based on the given key field from datasource mapping.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary"
}
});
});
</script>fields.priority string
Priority field has been mapped data source field to maintain cards priority.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", RankId: 1 },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", RankId: 2 },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", RankId: 2 },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", RankId: 1 },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", RankId: 3 }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
priority: "RankId",
content: "Summary"
}
});
});
</script>fields.content string
Content field has been Mapped into card text.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
});
});
</script>fields.tag string
Tag field has been Mapped into card tag.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Estimate: "2.5" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Estimate: "1.5" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Estimate: "1" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Estimate: "3" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert", Estimate: "1.5" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
tag: "Tags"
}
});
});
</script>fields.title string
Title field has been Mapped to field in datasource for title content. If title field specified , card expand/collapse will be enabled with header and content section.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
title: "Assignee"
}
});
});
</script>fields.color string
To customize the card has been Mapped into card color field.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", Type: "UG" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", Type: "Issue" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", Type: "Improvement" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", Type: "UG" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Janet", Type: "Epic" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
color: "Type"
},
cardSettings: {
colorMapping: {
"#cb2027": "Issue,Story",
"#67ab47": "Improvement",
"#fbae19": "Epic",
"#6a5da8": "UG"
}
}
});
});
</script>fields.imageUrl string
ImageUrl field has been Mapped into card image.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy", ImgUrl: "../themes/images/kanban/1.png" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew", ImgUrl: "../themes/images/kanban/2.png" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew", ImgUrl: "../themes/images/kanban/2.png" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy", ImgUrl: "../themes/images/kanban/1.png" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Janet", ImgUrl: "../themes/images/kanban/3.png" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
imageUrl: "ImgUrl"
}
});
});
</script>fields.collapsibleCards Object
Get or sets an object that indicates the options to map the cards to the collapsible area.
Default Value
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Close", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
collapsibleCards: { field: "Status", key: "Close" }
}
});
});
</script>fields.collapsibleCards.field string
It is used to specify the collapsible card’s field mapping.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" },
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
collapsibleCards: { field: "Status", key: "Close" }
},
}
);
});
</script>fields.collapsibleCards.key string
It is used to specify the collapsible card’s key mapping which is available in datasource value of field mapped in collapsibleCards.field.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 5", Assignee: "Andrew" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" },
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
collapsibleCards: { field: "Status", key: "Close" }
},
}
);
});
</script>keyField string
To map datasource field for column values mapping
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
content: "Summary"
}
});
});
</script>isResponsive boolean
When set to true, adapts the Kanban layout to fit the screen size of devices on which it renders.
Default Value:
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
isResponsive: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>minWidth number
Gets or sets a value that indicates whether to set the minimum width of the responsive Kanban while isResponsive property is true.
Default Value:
- 0
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
minWidth: 400,
isResponsive: true,
columns: [
{ headerText: "Backlog", key: "Open", width: 150 },
{ headerText: "In Progress", key: "InProgress", width: 120 },
{ headerText: "Testing", key: "Testing", width: 120 },
{ headerText: "Done", key: "Close", width: 150 }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>filterSettings Array
To customize the filtering behavior based on queries given.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Janet" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
allowFiltering:true,
filterSettings: [
{ text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet'" },
{ text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
],
}
);
});
</script>filterSettings.text string
Gets or sets an object of display name to filter queries.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Janet" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
filterSettings: [
{ text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet'" },
{ text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
],
}
);
});
</script>filterSettings.query Object
Gets or sets an object that Queries to perform filtering
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Janet" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
filterSettings: [
{ text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet'" },
{ text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
],
}
);
});
</script>filterSettings.description string
Gets or sets an object of tooltip to filter buttons.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Janet" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Janet" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
filterSettings: [
{ text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet"), description: "Displays issues which matches the assignee as 'Janet'" },
{ text: "Testing Issues", query: new ej.Query().where("Status", "equal", "Testing"), description: "Display the issues of 'Testing'" }
],
}
);
});
</script>query Object
ej Query to query database of Kanban.
Default Value:
- null
Example
<div id="kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" }
];
$(function () {
var query = ej.Query().select(["Status", "Id", "Summary"]);
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
keyField: "Status",
query: query,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" }
],
fields: {
primaryKey: "Id",
content: "Summary"
},
}
);
});
</script>keySettings Object
To change the key in keyboard interaction to Kanban control.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
allowKeyboardNavigation: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
selectionType: "multiple",
editSettings: {
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.String },
{ field: "Status", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Assignee", editType: ej.Kanban.EditingType.Dropdown },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 } },
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea }
],
allowEditing: true,
allowAdding: true
},
keySettings: {
focus: "e",
insertCard: "45",
},
});
$(document).on("keydown", function (e) {
if (e.altKey && e.keyCode === 74) {
$("#Kanban").focus();
}
});
});
</script>scrollSettings Object
Gets or sets an object that indicates whether to customize the scrolling behavior of the Kanban.
Default Value:
- Object
Example
<div id="kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
{ Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
keyField: "Status",
allowScrolling: true,
scrollSettings: {
height: 400,
width: 700
}
}
);
});
</script>scrollSettings.height string/number
Gets or sets an object that indicates to render the Kanban with specified scroll height.
Default Value:
- 0
Example
<div id="kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
{ Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
keyField: "Status",
allowScrolling: true,
scrollSettings: {
height: 400
}
}
);
});
</script>scrollSettings.width string/number
Gets or sets an object that indicates to render the Kanban with specified scroll width.
Default Value:
- auto
Example
<div id="kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
{ Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary",
},
keyField: "Status",
allowScrolling: true,
scrollSettings: {
height: 400,
width: 700
}
}
);
});
</script>scrollSettings.allowFreezeSwimlane boolean
To allow the Kanban to freeze particular swimlane at the time of scrolling , until scroll reaches next swimlane and it continues.
Default Value:
- false
Example
<div id="kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "InProgress", Summary: "Task 5", Assignee: "Andrew" },
{ Id: 6, Status: "Close", Summary: "Task 6", Assignee: "Robert" },
{ Id: 7, Status: "Testing", Summary: "Task 7", Assignee: "Michael" },
{ Id: 8, Status: "InProgress", Summary: "Task 8", Assignee: "Steven" },
{ Id: 9, Status: "Close", Summary: "Task 9", Assignee: "Robert" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
allowScrolling: true,
scrollSettings: {
height: 500,
width: 800,
allowFreezeSwimlane: true,
},
columns: [
{ headerText: "Backlog", key: "Open", width: 250 },
{ headerText: "In Progress", key: "InProgress", width: 220 },
{ headerText: "Testing", key: "Testing", width: 220 },
{ headerText: "Done", key: "Close", width: 250 }
],
keyField: "Status",
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary"
},
});
});
</script>searchSettings Object
To customize the searching behavior of the Kanban.
Default Value:
- Object
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
allowSearching: true,
searchSettings: {
fields: ["Summary", "Id"],
key: "",
operator: "contains",
ignoreCase: true,
},
}
);
});
</script>searchSettings.fields Array
To customize the fields the searching operation can be perform.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
allowSearching: true,
searchSettings: {
fields: ["Summary", "Id"],
key: "",
operator: "contains",
ignoreCase: true,
}
}
);
});
</script>searchSettings.key string
To customize the searching string.
Default Value:
- ””
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
allowSearching: true,
searchSettings: {
key: "Task 1",
operator: "contains",
ignoreCase: true,
}
}
);
});
</script>searchSettings.operator string
To customize the operator based on searching.
Default Value:
- contains
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
allowSearching: true,
searchSettings: {
key: "Task 1",
operator: "contains",
ignoreCase: true,
},
}
);
});
</script>searchSettings.ignoreCase boolean
To customize the ignore case based on searching.
Default Value:
- true
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "In Progress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
},
allowSearching: true,
searchSettings: {
key: "task",
operator: "contains",
ignoreCase: true,
},
}
);
});
</script>selectionType enum
To allow customize selection type. Accepting types are “single” and “multiple”.
| Name | Description |
|---|---|
| Single | Support for Single selection in Kanban |
| Multiple | Support for multiple selections in Kanban |
Default Value:
- ej.Kanban.SelectionType.Single
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
selectionType: "multiple",
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>stackedHeaderRows Array
Gets or sets an object that indicates to managing the collection of stacked header rows for the Kanban.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" },
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "Validated", key: "Validate" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
stackedHeaderRows: [{
stackedHeaderColumns: [{ headerText: "Unresolved", column: "Backlog,Validated,In Progress" },
{ headerText: "Resolved", column: "Testing,Done" }
]
}
],
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>stackedHeaderRows.stackedHeaderColumns Array
Gets or sets a value that indicates whether to add stacked header columns into the stacked header rows.
Default Value:
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" },
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "Validated", key: "Validate" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
stackedHeaderRows: [{
stackedHeaderColumns: [{ headerText: "Unresolved", column: "Backlog,Validated,In Progress" },
{ headerText: "Resolved", column: "Testing,Done" }
]
}
],
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>stackedHeaderRows.stackedHeaderColumns.headerText string
Gets or sets a value that indicates the headerText for the particular stacked header column.
Default Value:
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" },
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "Validated", key: "Validate" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
stackedHeaderRows: [{
stackedHeaderColumns: [{ headerText: "Unresolved", column: "Backlog,Validated,In Progress" },
{ headerText: "Resolved", column: "Testing,Done" }
]
}
],
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>stackedHeaderRows.stackedHeaderColumns.column string
Gets or sets a value that indicates the column for the particular stacked header column.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" },
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "Validated", key: "Validate" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
stackedHeaderRows: [{
stackedHeaderColumns: [{ headerText: "Unresolved", column: "Backlog,Validated,In Progress" },
{ headerText: "Resolved", column: "Testing,Done" }
]
}
],
fields: {
primaryKey: "Id",
content: "Summary"
}
});
});
</script>tooltipSettings Object
The tooltip allows to display card details in a tooltip while hovering on it.
tooltipSettings.enable boolean
To enable or disable the tooltip display.
Default Value
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
tooltipSettings: {
enable: true,
},
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
title: "Id",
tag: "Tags",
color: "Type",
imageUrl: "ImgUrl"
},
cardSettings: {
colorMapping: {
"#cb2027": "Issue,Story",
"#67ab47": "Improvement",
"#fbae19": "Epic",
"#6a5da8": "UG",
}
},
});
});
</script>tooltipSettings.template string
To customize the tooltip display based on your requirements.
Default Value:
- null
Example
<div id="kanban"></div>
<script id="tooltipTemp" type="text/x-jsrender">
<div class='e-kanbantooltiptemp ' style="display: none">
<table>
<tr>
<td class="photo">
<img src="">
</td>
<td class="details">
<table>
<colgroup>
<col width="30%">
<col width="70%">
</colgroup>
<tbody>
<tr>
<td class="CardHeader">Name: </td>
<td></td>
</tr>
<tr>
<td class="CardHeader">Task: </td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</script>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Type: "Epic", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Type: "Story", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Type: "Improvement", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Type: "Issue", Assignee: "Nancy" }
];
$(function () {
var data = ej.DataManager(window.kanban);
$("#kanban").ejKanban(
{
dataSource: data,
tooltipSettings: {
enable: true,
template: "#tooltipTemp",
},
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
title: "Id",
tag: "Tags",
color: "Type",
imageUrl: "ImgUrl",
},
cardSettings: {
colorMapping: {
"#cb2027": "Issue,Story",
"#67ab47": "Improvement",
"#fbae19": "Epic",
"#6a5da8": "UG",
},
},
});
});
</script>workflows Array
Gets or sets an object that indicates to render the Kanban with specified workflows.
Default Value
- Array
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanbanPizzaData=[
{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
]
$(function() {
var data = ej.DataManager(window.kanbanPizzaData)
$("#Kanban").ejKanban(
{
dataSource: data,
workflows:[
{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
{key:"Ready to Serve",allowedTransitions:"Served"},
{key:"Ready to Deliver",allowedTransitions:"Delivered"}
],
enableTotalCount:true,
allowToggleColumn:true,
columns: [
{ headerText: "Order", key: "Order"},
{ headerText: "Ready to Serve", key: "Ready to Serve"},
{ headerText: "Home Delivery", key: "Ready to Deliver" },
{ headerText: "Served or Delivered", key: "Delivered,Served"}
],
keyField: "Category",
allowTitle: true,
fields: {
content: "Description",
primaryKey: "Id"
}
});
});
</script>workflows.key string/number
Gets or sets an object that indicates to render the Kanban with specified workflows key.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanbanPizzaData=[
{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
]
$(function() {
var data = ej.DataManager(window.kanbanPizzaData)
$("#Kanban").ejKanban(
{
dataSource: data,
workflows:[
{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
{key:"Ready to Serve",allowedTransitions:"Served"},
{key:"Ready to Deliver",allowedTransitions:"Delivered"}
],
enableTotalCount:true,
allowToggleColumn:true,
columns: [
{ headerText: "Order", key: "Order"},
{ headerText: "Ready to Serve", key: "Ready to Serve"},
{ headerText: "Home Delivery", key: "Ready to Deliver" },
{ headerText: "Served or Delivered", key: "Delivered,Served"}
],
keyField: "Category",
allowTitle: true,
fields: {
content: "Description",
primaryKey: "Id"
}
});
});
</script>workflows.allowedTransitions string
Gets or sets an object that indicates to render the Kanban with specified workflows allowed Transitions.
Default Value
- null
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanbanPizzaData=[
{Id:1,Title:"Mexican Green Wave",Type:"Vegetarian",Size:"Small",Category:"Order",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_09.png" },
{Id:2,Title:"Milan Veg Fantasy",Type:"Vegetarian",Size:"Medium",Category:"Order",Description:"Zucchini wrapped in spicy grilled seasoning along with tomato.",Tags:"Onions, Pepper, Tomato, Zucchini",ImageURL:"../content/images/kanban/menu_01.png" },
{Id:3,Title:"Peppy",Type:"Vegetarian",Size:"Large",Category:"Ready to Serve",Description:"It's made using toppings of tomato, mozzarella cheese and fresh basil, which represent the red, white and green of the Italian flag.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_02.png" },
{Id:4,Title:"Lebanese",Type:"Vegetarian",Size:"Small",Category:"Ready to Deliver",Description:"Lebanese Pizza topped with tomato sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_03.png" },
{Id:5,Title:"Farm House",Type:"Vegetarian",Size:"Small",Category:"Delivered",Description:"Stromboli sandwich with chili sauce.",Tags:"Onions, Pepper, Cheese",ImageURL:"../content/images/kanban/menu_04.png" },
]
$(function() {
var data = ej.DataManager(window.kanbanPizzaData)
$("#Kanban").ejKanban(
{
dataSource: data,
workflows:[
{key:"Order",allowedTransitions:"Ready to Serve,Ready to Deliver"},
{key:"Ready to Serve",allowedTransitions:"Served"},
{key:"Ready to Deliver",allowedTransitions:"Delivered"}
],
enableTotalCount:true,
allowToggleColumn:true,
columns: [
{ headerText: "Order", key: "Order"},
{ headerText: "Ready to Serve", key: "Ready to Serve"},
{ headerText: "Home Delivery", key: "Ready to Deliver" },
{ headerText: "Served or Delivered", key: "Delivered,Served"}
],
keyField: "Category",
allowTitle: true,
fields: {
content: "Description",
primaryKey: "Id"
}
});
});
</script>locale string
Gets or sets a value that indicates whether to customizing the user interface (UI) as locale-specific in order to display regional data i.e. in a language and culture specific to a particular country or region.
Default Value:
- “en-US”
Example
<div id="Kanban"></div>
<script>
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task 4", Assignee: "Nancy" },
{ Id: 5, Status: "Validate", Summary: "Task 5", Assignee: "Andrew" }
];
ej.Kanban.Locale["de-DE"] = {
EmptyCard: "Keine Karten angezeigt werden",
SaveButton: "Speichern",
CancelButton: "stornieren",
EditFormTitle: "Details von ",
AddFormTitle: "Neue Karte hinzufugen",
SwimlaneCaptionFormat: "- 8 Artikel Artikel ",
FilterSettings: "Filter:",
FilterOfText: "Von",
Cards: "kaarten"
Max: "Max.",
Min: "Min."
};
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban(
{
dataSource: data,
locale: "de-DE",
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress", constraints: { max: 2 } },
{ headerText: "Testing", key: "Testing" }
],
keyField: "Status",
allowTitle: true,
fields: {
primaryKey: "Id",
swimlaneKey: "Assignee",
content: "Summary"
}
});
});
</script>showColumnWhenEmpty boolean
Gets or sets a value that indicates whether to render kanban columns using without data source.
Default Value
- false
Example
<div id="Kanban"></div>
<script type="text/javascript">
window.kanban = [
{ Id: 1, Status: "Open", Summary: "Task 1", Assignee: "Nancy" },
{ Id: 2, Status: "Open", Summary: "Task 2", Assignee: "Andrew" },
{ Id: 3, Status: "InProgress", Summary: "Task 3", Assignee: "Andrew" },
{ Id: 4, Status: "Testing", Summary: "Task4", Assignee: "Nancy" }
];
var data = ej.DataManager(window.kanban).executeLocal(ej.Query().take(0));
$(function () {
var data = ej.DataManager(window.kanban);
$("#Kanban").ejKanban({
dataSource: data,
showColumnWhenEmpty: true,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Testing", key: "Testing" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
fields: {
primaryKey: "Id",
content: "Summary",
},
editSettings: {
editItems: [
{ field: "Id", editType: ej.Kanban.EditingType.Text,validationRules: { required: true, number: true }},
{ field: "Status", editType: ej.Kanban.EditingType.Text },
{ field: "Assignee", editType: ej.Kanban.EditingType.Text },
{ field: "Estimate", editType: ej.Kanban.EditingType.Numeric, editParams: { decimalPlaces: 2 },validationRules: {range: [0, 1000]}},
{ field: "Summary", editType: ej.Kanban.EditingType.TextArea,validationRules: { required: true}}
],
allowEditing: true,
allowAdding: true
}
});
});
</script>Methods
columns(column,key,[action])
Add or remove columns in Kanban columns collections.Default action is add.
| Name | Type | Description |
|---|---|---|
| column details | array/string | Pass array of columns or string of headerText to add/remove the column in Kanban |
| key value | array/string | Pass array of columns or string of key value to add/remove the column in Kanban |
| action | string | optional Pass add/remove action to be performed. By default "add" action will perform |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#kanban").data("ejKanban");
// remove Kanban column
kanbanObj.columns("Testing","Testing", "remove");
// Add new column into Kanban or modified already existing column in the Kanban.
kanbanObj.columns("Review","Review","add");
</script>destroy()
Destroy the Kanban widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.
Example
<script>
var kanbanObj = $("#Kanban").data("ejKanban");
kanbanObj.destroy(); // destroy the Kanban
</script><script>
// destroy the Kanban
$("#Kanban").ejKanban("destroy");
</script>dataSource(datasource)
Refresh the Kanban with new data source.
| Name | Type | Description |
|---|---|---|
| datasource | array | Pass new data source to the Kanban |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Refreshes the Kanban data source
kanbanObj.dataSource(data);
</script><script>
// Refreshes the Kanban data source
$("#Kanban").ejKanban("dataSource", data);
</script>toggleColumn(headerText or $div)
toggleColumn based on the headerText in Kanban.
| Name | Type | Description |
|---|---|---|
| headerText | object | Pass the header text of the column to get the corresponding column object |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// toggleColumn the row based on the row state
kanbanObj.toggleColumn("Backlog");
</script><script>
// toggleColumn the row based on the row state
$("#Kanban").ejKanban("toggleColumn",("Backlog"));
</script>toggleCard($div or id)
Expand or collapse the card based on the state of target “div”
| Name | Type | Description |
|---|---|---|
| key | string/number | Pass the id of card to be toggle |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// toggleCard the row based on the row state
kanbanObj.toggleCard("2");
</script><script>
// toggleCard the row based on the row state
$("#Kanban").ejKanban("toggleCard",("2"));
</script>getVisibleColumnNames()
Used for get the names of all the visible column name collections in Kanban.
Returns:
Array
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Gets the names of all the visible column collections
kanbanObj.getVisibleColumnNames();
</script><script>
// Gets the names of all the visible column collections
$("#Kanban").ejKanban("getVisibleColumnNames");
</script>getScrollObject()
Get the scroller object of Kanban.
Returns:
ej.Scroller
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Gets scroll object of Kanban control
kanbanObj.getScrollObject();
</script><script>
// Gets scroll object of Kanban control
$("#Kanban").ejKanban("getScrollObject");
</script>getColumnByHeaderText(headerText)
Get the column details based on the given header text in Kanban.
| Name | Type | Description |
|---|---|---|
| headerText | string | Pass the header text of the column to get the corresponding column object |
Returns:
string
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Gets the column details based on the given headerText
kanbanObj.getColumnByHeaderText("Testing");
</script><script>
// Gets the column details based on the given headerText
$("#Kanban").ejKanban("getColumnByHeaderText", "Testing");
</script>getHeaderTable()
Get the table details based on the given header table in Kanban.
Returns:
string
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Gets the table details based on the given headerTable
kanbanObj.getHeaderTable();
</script>hideColumns(headerText)
Hide columns from the Kanban based on the header text
| Name | Type | Description |
|---|---|---|
| headerText | array/string | you can pass either array of header text of various columns or a header text of a column to hide |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
kanbanObj.hideColumns("Testing"); // Hides column based on the given header text of the column
kanbanObj.hideColumns(["Testing", "Done"]); // Hide columns based on the array of header text of the columns given
</script><script>
// Hide column based on the given header text of the column
$("#Kanban").ejKanban("hideColumns", "Testing");
// Hide columns based on the array of header text of the columns given
$("#Kanban").ejKanban("hideColumns", ["Testing", "Done"]);
</script>print()
Print the Kanban Board
Returns:
Void
####Example
<div id="Kanban"></div>
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// It prints the kanban board.
kanbanObj.print();
</script><div id="Kanban"></div>;
<script>
// It prints the kanban board.
$("#Kanban").ejKanban("print");
</script>refreshTemplate()
Refresh the template of the Kanban
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Refreshes the template of the Kanban control
kanbanObj.refreshTemplate();
</script><script>
// Refreshes the template of the Kanban control.
$("#Kanban").ejKanban("refreshTemplate");
</script>refresh([templateRefresh])
Refresh the Kanban contents.The template refreshment is based on the argument passed along with this method
| Name | Type | Description |
|---|---|---|
| templateRefresh | boolean | optional When templateRefresh is set true, template and Kanban contents both are refreshed in Kanban else only Kanban content is refreshed |
Example
<div id="Kanban"></div>
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
kanbanObj.refresh(); // Refresh the Kanban contents only
kanbanObj.refresh(true); // Refresh the template of the Kanban control.
</script><div id="Kanban"></div>
<script>
// Refresh the Kanban.
$("#Kanban").ejKanban("refresh");
// Refresh the template of the Kanban control.
$("#Kanban").ejKanban("refresh", true);
</script>showColumns(headerText)
Show columns in the Kanban based on the header text.
| Name | Type | Description |
|---|---|---|
| headerText | array/string | You can pass either array of header text of various columns or a header text of a column to show |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#kanban").data("ejKanban");
kanbanObj.showColumns("Testing"); // Shows column based on the given header text of the column
kanbanObj.showColumns(["Testing", "Done"]); // Shows columns based on the array of header text of the columns given
</script><script>
// Shows column based on the given header text of the column
$("#kanban").ejKanban("showColumns", "Testing");
// Shows columns based on the array of header text of the columns given
$("#Kanban").ejKanban("showColumns", ["Testing", "Done"]);
</script>updateCard(key,data)
Update a card in Kanban control based on key and JSON data given.
| Name | Type | Description |
|---|---|---|
| key | string | Pass the key field Name of the column |
| data | array | Pass the edited JSON data of card need to be update. |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends a update card request to the Kanban
kanbanObj.updateCard(2,{ Id: 2, Status: "Open", Summary: "Task 1", Assignee: "Andrew"});
</script>KanbanSelection
KanbanSelection.clear()
It is used to clear all the card selection.
Example
<script>
// Create Kanban object.
var kanbanObj = $("#kanban").data("ejKanban");
kanbanObj.KanbanSelection.clear() // clears all of the card selection
</script><script>
// clears all of the card selection
$("#Kanban").ejKanban("clear");
</script>KanbanSwimlane
KanbanSwimlane.expandAll()
Expand all the swimlane rows in Kanban.
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// expand all the rows
kanbanObj.KanbanSwimlane.expandAll();
</script><script>
// expand all the group caption rows
$("#Kanban").ejKanban("expandAll");
</script>KanbanSwimlane.collapseAll()
Collapse all the swimlane rows in Kanban.
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Collapse all the rows
kanbanObj.KanbanSwimlane.collapseAll();
</script><script>
// Collapse all the group caption rows
$("#Kanban").ejKanban("collapseAll");
</script>KanbanSwimlane.toggle($div or key)
Expand or collapse the swimlane row based on the state of target “div”
| Name | Type | Description |
|---|---|---|
| $div | object | Pass the div object to toggleSwimlane row based on its row state |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// toggle the row based on the row state
kanbanObj.KanbanSwimlane.toggle($(".e-slexpandcollapse").eq(1));
</script><script>
// toggle the row based on the row state
$("#Kanban").ejKanban("toggleSwimlane", $(".e-slexpandcollapse").eq(1));
</script>
</script>KanbanFilter
KanbanFilter.clearSearch()
Method used for send a clear search request to Kanban.
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends a clearSearch request to the Kanban
kanbanObj.KanbanFilter.clearSearch();
</script>KanbanFilter.searchCards(searchString)
Send a search request to Kanban with specified string passed in it.
| Name | Type | Description |
|---|---|---|
|
string | Pass the string to search in Kanban card |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends a search request to the Kanban
kanbanObj.KanbanFilter.searchCards("Analyze");
</script><script>
// Sends a search request to the Kanban
$("#Kanban").ejKanban("searchCards", "Analyze");
</script>KanbanFilter.clearFilter()
Send a clear request to filter cards in the kanban.
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends clear request to filter the cards
kanbanObj.KanbanFilter.clearFilter();
</script>KanbanFilter.filterCards()
Send a filtering request to cards in the kanban.
| Name | Type | Description |
|---|---|---|
| query | object | Pass the query to the cards |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends filtering request to the cards
kanbanObj.KanbanFilter.filterCards(new ej.Query().where("Assignee", "equal", "Janet"));
</script>KanbanEdit
KanbanEdit.addCard([primaryKey],[card])
Add a new card in Kanban control when allowAdding is set as true. If parameters are not given default dialog will be open.
| Name | Type | Description |
|---|---|---|
| primaryKey | string | Pass the primary key field Name of the column |
| card | array | Pass the edited JSON data of card need to be add. |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends an add new card request to the Kanban
kanbanObj.KanbanEdit.addCard();
</script><script>
// add new card to the Kanban
kanbanObj.KanbanEdit.addCard("2",{Id:2, Status: "Open", Summary: "Task 1", Assignee: "Nancy" })
</script>KanbanEdit.cancelEdit()
Send a cancel request of add/edit card in Kanban when allowEditing/allowAdding is set as true.
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends a cancel request to the Kanban
kanbanObj.KanbanEdit.cancelEdit();
</script><script>
// Sends a cancel request to the Kanban
$("#Kanban").ejKanban("cancelEdit");
</script>KanbanEdit.deleteCard(Key)
Delete a card in Kanban control when allowAdding/allowEditing is set as true.
| Name | Type | Description |
|---|---|---|
| Key | string/number | Pass the key of card to be delete |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#kanban").data("ejKanban");
// Sends a delete card request to the Kanban
kanbanObj.KanbanEdit.deleteCard(2);
</script>KanbanEdit.endEdit()
Send a save request in Kanban when any card is in edit/new add card state and allowEditing/allowAdding is set as true.
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends a save request to the Kanban
kanbanObj.KanbanEdit.endEdit();
</script><script>
// Sends a save request to the Kanban
$("#Kanban").ejKanban("endEdit");
</script>KanbanEdit.startEdit($div or key)
Send an edit card request in Kanban when allowEditing is set as true. Parameter will be HTML element or primary key
| Name | Type | Description |
|---|---|---|
| $div | object | Pass the div selected row element to be edited in Kanban | key | string/number | Pass the key element to be edited in Kanban | </tr>
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// Sends an edit card request to the Kanban
kanbanObj.KanbanEdit.startEdit($(".e-kanbancontent .e-kanbancard").first());
kanbanObj.KanbanEdit.startEdit(2);
</script><script>
// Sends an edit card request to the Kanban
$("#Kanban").ejKanban("startEdit", ($(".e-kanbancontent .e-kanbancard").first());
$("#Kanban").ejKanban("startEdit", 2);
</script>KanbanEdit.setValidationToField(name, rules)
Method used for set validation to a field during editing.
| Name | Type | Description |
|---|---|---|
| name | string | Specify the name of the column to set validation rules |
| rules | object | Specify the validation rules for the field |
Example
<script>
// Create Kanban object.
var kanbanObj = $("#Kanban").data("ejKanban");
// It is used to set validation to a field during editing
kanbanObj.KanbanEdit.setValidationToField("Summary", { required: true });
</script><script>
// It is used to set validation to a field during editing
$("#Kanban").ejKanban("setValidationToField", "Summary", { required: true });
</script>Events
actionBegin
Triggered for every Kanban action before its starts.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Event parameters when Kanban is initialized:
|
||||||||||||||||||||||||
| argument | Object | Event parameters when Kanban card editing action starts:
|
||||||||||||||||||||||||
| argument | Object | Event parameters when Kanban card save action starts:
|
||||||||||||||||||||||||
| argument | Object | Event parameters when Kanban card cancel action starts:
|
||||||||||||||||||||||||
| argument | Object | Event parameters when Kanban card delete action starts:
|
||||||||||||||||||||||||
| argument | Object | Event parameters when add new card action starts:
|
||||||||||||||||||||||||
| argument | Object | Event parameters when Kanban filtering action starts:
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
actionBegin: function (args){}
});
</script>actionComplete
Triggered for every Kanban action success event.
| Name | Type | Description | |||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments in actionComplete when Kanban is initialized.
|
|||||||||||||||||||||||||||
| argument | object | Arguments in actionComplete after Kanban card editing action is completed.
|
|||||||||||||||||||||||||||
| argument | object | Arguments in actionComplete after Kanban card save action is completed.
|
|||||||||||||||||||||||||||
| argument | object | Arguments in actionComplete after Kanban card cancel action is completed.
|
|||||||||||||||||||||||||||
| argument | object | Arguments in actionComplete after Kanban card delete action is completed.
|
|||||||||||||||||||||||||||
| argument | object | Arguments in actionComplete after add new card action is completed.
|
|||||||||||||||||||||||||||
| argument | object | Arguments in actionComplete after Kanban filtering action is completed.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
actionComplete: function (args) {}
});
</script>actionFailure
Triggered for every Kanban action server failure event.
| Name | Type | Description | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments in actionFailure when Kanban is initialized.
|
||||||||||||||||||||||||||||||
| argument | object | Arguments in actionFailure after Kanban card editing action is completed.
|
||||||||||||||||||||||||||||||
| argument | object | Arguments in actionFailure after Kanban card save action is completed.
|
||||||||||||||||||||||||||||||
| argument | object | Arguments in actionFailure after Kanban card delete action is completed.
|
||||||||||||||||||||||||||||||
| argument | object | Arguments in actionFailure after add new card action is completed.
|
||||||||||||||||||||||||||||||
| argument | object | Arguments in actionFailure after Kanban filtering action is completed.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
actionFailure: function (args) {}
});
</script>beginEdit
Triggered before the task is going to be edited.
| Name | Type | Description | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when begin edit event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
beginEdit: function (args) {}
});
</script>beforeCardSelect
Triggered before the card is selected.
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when beforeCardSelect event is triggered.
|
Example
<div id="kanban"></div>
<script>
$("#Kanban").ejKanban({
beforeCardSelect: function (args) {}
});
</script>cardClick
Trigger after the card is clicked.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when cardClick event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").Kanban({
cardClick: function (args) {}
});
</script>cardDrag
Triggered when the card is being dragged.
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when columnDrag event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
cardDrag: function (args) {}
});
</script>cardDragStart
Triggered when card dragging start.
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when cardDragStart event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
cardDragStart: function (args) {}
});
</script>cardDragStop
Triggered when card dragging stops.
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when cardDragStart event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
cardDragStop: function (args) {}
});
</script>cardDrop
Triggered when the card is Dropped.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when cardDrop event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
cardDrop: function (args) {}
});
</script>cardSelect
Triggered after the card is selected.
| Name | Type | Description | |||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when cardSelect event is triggered.
|
Example
<div id="kanban"></div>
<script>
$("#Kanban").ejKanban({
cardSelect: function (args) {}
});
</script>cardDoubleClick
Triggered when card is double clicked.
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Arguments when cardDoubleClick event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
cardDoubleClick: function (args) {}
});
</script>cardSelecting
Triggered before the card is selected.
| Name | Type | Description | |||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when cardSelecting event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
cardSelecting: function (args) {}
});
</script>create
Triggered when the Kanban is rendered completely
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument |
|
Event parameters from kanban
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
create: function (args){}
});
</script>cellClick
Triggers after the cell is clicked.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| model | object | Returns the kanban model. |
| type | string | Returns the name of the event. |
| cellIndex | number | Returns the select cell index value. |
| rowIndex | number | Returns the edited row index. |
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
cellClick: function (args) {}
});
</script>contextOpen
Triggered before the context menu is opened.
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Arguments when contextOpen event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
contextOpen: function (args){}
});
</script>contextClick
Triggered when context menu item is clicked in Kanban
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Arguments when contextClick event is triggered
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
contextClick: function (args){}
});
</script>dataBound
Triggered the Kanban is bound with data during initial rendering.
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when dataBound event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
dataBound: function (args) {}
});
</script>destroy
Triggered when Kanban going to destroy.
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument |
|
Arguments when destroy event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
destroy: function (args) {}
});
</script>endDelete
Triggered after the card is deleted.
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when endDelete event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
endDelete: function (args) {}
});
</script>endEdit
Triggered after the card is edited.
| Name | Type | Description | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object | Arguments when endEdit event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
endEdit: function (args) {}
});
</script>headerClick
Triggers after the header is clicked.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | Returns the cancel option value. |
| model | object | Returns the kanban model. |
| type | string | Returns the name of the event. |
| cellIndex | number | Returns the select cell index value. |
| columnData | object | Returns the column object. |
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
headerClick: function (args) {}
});
</script>load
Triggered initial load.
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument |
|
Arguments when load event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
load: function (args) {}
});
</script>swimlaneClick
Triggers before swim lane expand or collapse icon is clicked.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument |
|
Arguments when swim lane click event is triggered.
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
swimlaneClick: function (args) {}
});
</script>queryCellInfo
Triggered every time a single card rendered request is made to access particular card information.
| Name | Type | Description | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Event parameters from Kanban
|
Example
<div id="Kanban"></div>
<script>
$("#Kanban").ejKanban({
queryCellInfo: function (args){}
});
</script>toolbarClick
Triggered when toolbar item is clicked in Kanban.
| Name | Type | Description | ||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| argument | Object |
Arguments when toolBarClick event is triggered.
|