Empty Swimlanes

Question

Hi,

I am integrating Syncfusion kanban to Odoo, everything is working fine but I just need 2 functionalities that I don't know how to implement.

It is possible to display empty swimlanes? like giving the kanban component all the swimlanes that I want to render even though some of them doesn't have any cards?
How can I collapse some specific swimlanes? for example, first swimlane expanded and the rest collapsed when I open the kanban view.

Thanks in advance

Buvana Sathasivam · Accepted Answer

Hi Marco, 

Greetings from Syncfusion support. 

Query #1: “It is possible to display empty swimlanes? like giving the kanban component all the swimlanes that I want to render even though some of them doesn't have any cards?” 

Yes. It is able to achieve using sortComparer function inside the swimlaneSettings property. You can push the custom keyField and textField into already created swimlane rows and returned the sortComparer arguments. Please find the below code and sample. 





let kanbanObj: Kanban = new Kanban({ 
  
  swimlaneSettings: { 
    sortComparer: customSorting, 
  }, 
}); 
kanbanObj.appendTo('#Kanban'); //Render initialized Kanban control 
function customSorting(args: SortComparerFunction): void { 
  args.push({ keyField: 'empty', textField: '' }); 
  return args; 
} 


Sample: https://stackblitz.com/edit/m1x2nn 

Query #2: “How can I collapse some specific swimlanes? for example, first swimlane expanded and the rest collapsed when I open the kanban view.” 

You will be able to collapse the first swimlane and expand the rest of the swimlane rows at initial rendering, like below code. 





let initial: boolean = true; 
let kanbanObj: Kanban = new Kanban({ 
  dataBound: dataBound, 
}); 
function dataBound(): void { 
  if (initial) { 
    for ( 
      var i = 1; 
      i < document.querySelectorAll('.e-swimlane-header .e-item-count').length; 
      i++ 
    ) { 
      ( 
        document 
          .querySelectorAll('.e-swimlane-header') 
          [i].querySelector('.e-icons') as HTMLDivElement 
      ).click(); 
    } 
    initial = false; 
  } 
} 


Sample: https://stackblitz.com/edit/rjj5rk-kl9fdk 

Please let us know if you have any further assistance. 

Regards, 
Buvana S

Marco Vinaja · Answer

Awesome, Thanks Buvana, that was exactly what I needed

Buvana Sathasivam · Answer

Hi Marco, 

Most welcome. Please get back to us if you need any further assistance. 

Regards, 
Buvana S

duy vo · Answer

Hi Buvana,In this example https://ej2.syncfusion.com/demos/#/bootstrap5/kanban/swimlane.html, we can sort Swimlane by Ascending or Descending. Can we use sortComparer to do the custom sorting?For example, I haveswimlaneSettings: { keyField: 'Assignee', sortField: 'Rank'}I would like to sort by Rank field.Thank and best regards,DuyVT

Buvana Sathasivam · Answer

Hi Duy,Yes, you can use
the custom sort compare function to arrange the swimlane rows as per your wish.
In the below sample, we have rendered 3 swimlane rows in the set of 6 swimlane
rows and also used the RankId mapping field into keyField
property. Please find the below code for your reference. Index.ts

let kanbanObj: Kanban = new Kanban({
    swimlaneSettings: {
      keyField: 'RankId',
      textField: 'Assignee',
      sortComparer: customSort,
    },
  });
   
  function customSort(args: SortComparerFunction): SortComparerFunction {
    /* Custom Sort Function */
    args = args.slice(2, 5); // Here,  you can re-arrange the swimlane rows as per
  your wish
    return args;
  }

Sample: https://stackblitz.com/edit/jwrrgu-bxgp1g?file=index.tsRegards,Buvana S