We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to customize the card expand/collapse state by mapping data source field?

Platform: jQuery |
Control: ejKanban
Tags: kanban

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

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile