Close and open a group of swimlane keyfields

[Adrian Rodriguez]

Hi team,

I was checking if there´s any option that allows me to close all the swimlanes?

I mean, i have 4 users, each one with his own cards, is there any way to open all the users or close all the users with just one button?

There for example, to can open all the options at once and of course, can close all the options at once?

Thanks for your time and sorry for can't explain it better.

Greetings.

[Revanth Krishnan]

Hi Adrian, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I was checking if there´s any option that allows me to close all the swimlanes? Is there any way to open all the users or close all the users with just one button?” 

 

Yes, all the swimlanes can be opened and closed using a button. This can be achieved first selecting the all the opened swimlanes or closed swimlanes and then passing the elements in the ‘rowExpandCollapse’ method. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<button ejs-button id="addNew" class="e-dialog-add" (click)="OpenCloseSwimlane()"> 

  Open / Close(All Swimlane) 

</button> 

<ejs-kanban #kanbanObj cssClass="kanban-swimlane" keyField="Status" [dataSource]="kanbanData" 

  [cardSettings]="cardSettings" [swimlaneSettings]="swimlaneSettings"> 

  . . . 

</ejs-kanban> 

 

export class AppComponent { 

  @ViewChild('kanbanObj') 

  public kanbanObj; 

  public isOpenSwimlane: boolean = true; 

  . . . 

  public OpenCloseSwimlane(): void { 

    var currentSwimlanes; 

    if (this.isOpenSwimlane) { 

      // Return Opened Swimlane Elements. 

      var currentSwimlanes = this.kanbanObj.element.querySelectorAll('.e-swimlane-row:not(.e-collapsed)'); 

      this.isOpenSwimlane = false; 

    } else { 

      // Return Closed Swimlane Elements. 

      var currentSwimlanes = this.kanbanObj.element.querySelectorAll('.e-swimlane-row.e-collapsed'); 

      this.isOpenSwimlane = true; 

    } 

    for (var i = 0; i < currentSwimlanes.length; i++) { 

      //Method open or close the swimlane element 

      this.kanbanObj.actionModule.rowExpandCollapse(currentSwimlanes[i]); 

    } 

  } 

} 

 

Sample: https://stackblitz.com/edit/angular-y6g5bk-rnquj5?file=app.component.ts 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Adrian Rodriguez]

Once again you made it!

Exactly what I needed. It works perfect!

Thanks a lot for the support, and excuse me for the delay on the answer. I was a bit busy this days.

Again thanks a lot!

Regards

Adrian

[Revanth Krishnan]

Hi Adrian, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfied your requirement. Please let us know if you need any further assistance. 

 

Regards, 

Revanth