How to customize the card expand/collapse state by mapping data source field?
By default, Kanban control does not map to a data source field into the card expand/collapse state. The following steps show how to customize the card expand/collapse state by mapping the data source field.
Step 1:
Define the data source field as an isCardCollapsed boolean which is used to provide information about the expand/collapse state of card data and create Kanban control as shown below.
Kanban.html
<script type="text/javascript">
var kanbanData = [
{ Id: 1, Status: "Open", Summary: "Analyze the new requirements gathered from the customer.", Type: "Story", Priority: "Low", Tags: "Analyze,Customer", Estimate: 3.5, Assignee: "Andrew Fuller", ImgUrl: "/images/kanban/1.png", RankId: 1, isCardCollapsed: true },
{ Id: 2, Status: "InProgress", Summary: "Improve application performance", Type: "Improvement", Priority: "Normal", Tags: "Improvement", Estimate: 6, Assignee: "Andrew Fuller", ImgUrl: "/images/kanban/2.png", RankId: 1, isCardCollapsed: false },
{ Id: 3, Status: "Open", Summary: "Arrange a web meeting with the customer to get new requirements.", Type: "Others", Priority: "Critical", Tags: "Meeting", Estimate: 5.5, Assignee: "Janet", ImgUrl: "/images/kanban/3.png", RankId: 2, isCardCollapsed: true },
{ Id: 4, Status: "InProgress", Summary: "Fix the issues reported in the IE browser.", Type: "Bug", Priority: "Release Breaker", Tags: "IE", Estimate: 2.5, Assignee: "Janet", ImgUrl: "/images/kanban/3.png", RankId: 2, isCardCollapsed: false },
{ Id: 5, Status: "Testing", Summary: "Fix the issues reported by the customer.", Type: "Bug", Priority: "Low", Tags: "Customer", Estimate: "3.5", Assignee: "Andrew Fuller", ImgUrl:"/images/kanban/5.png", RankId: 1, isCardCollasped: true }
];
$(function() {
$("#Kanban").ejKanban(
{
dataSource: kanbanData,
columns: [
{ headerText: "Backlog", key: "Open" },
{ headerText: "In Progress", key: "InProgress" },
{ headerText: "Done", key: "Close" }
],
keyField: "Status",
allowTitle: true,
fields: {
content: "Summary",
primaryKey: "Id"
},
queryCellInfo: "onQueryCellInfo",
dataBound: "onDataBound"
});
});
Step 2:
Define the queryCellInfo event function onQueryCellInfo as shown below, where you can get an primaryKey of the card which is collapsed and stored in the collapse array using args.data. The args.data contains the data source mapped data for each card which is rendering.
var collapse =[];
function onQueryCellInfo(args){
if(args.data.isCardCollapsed)
collapse.push(args.data[args.model.fields.primaryKey]);
}
Step 3:
Define the dataBound event function onDataBound as shown below, where you can collapse the particular card using primary key stored in the collapse array using toggleCard public method.
function onDataBound(args){
var kanbanObj = $("#Kanban").data("ejKanban");
kanbanObj.toggleCard(collapse);
}
JS Playground: https://jsplayground.syncfusion.com/eafeo2h4
