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 |
Published Date: December 27, 2017 |
Last Revised Date: December 27, 2017
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.



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.


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.


JS Playground: http://jsplayground.syncfusion.com/eafeo2h4

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