Kanban Cards

[John Fleet]

How do I make all the cards shown collapsed (minimised?) using code-behind VB.Net ?

[Indrajith Srinivasan]

Hi John,

In order to show the cards in the collapsed state, we suggest to bound the data for enabling/disabling the cards collapse action with the dataSource. Later using the queryCellInfo event if the given dataSource has the collapsed data enabled push them in a local variable. Later in the dataBound event, by using the toggleCard property you can update the cards with collapsed initially. Check the below sample for reference.

KanbanData

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 },

                          ];

Events callback:

 

var collapse =[];

function onQueryCellInfo(args){

          if(args.data.isCardCollapsed)

          collapse.push(args.data[args.model.fields.primaryKey]);

      }

        function onDataBound(args){

        kanbanObj.toggleCard(collapse);

     }

                         

Example: https://jsplayground.syncfusion.com/bbdma0cu

Please let us know if the solution helps,

Regards,

Indrajith