Are we able to turn on/off Virtualization mode on run-time with Kanban Component?

[nguyen hoang phuong]

Hi Syncfusion Team,

My project uses the Kanban Component. When the data has numerous records, we decide to use the Virtualization mode. But the problem is: sometimes, when the coming data meets some conditions, we have to group data by using swimlanes, and base on the Syncfusion's documentation, Virtualization is not supported for swimlanes in the Kanban board. Because of that, I don't think setting up: enableVirtualization='true' ​in the <ejs-kanban> template will meet my requirement. Therefore, I tend to turn off the Virtualization mode when the data meets condition, otherwise I turn on the Virtualization mode​. ​But I don't think it works. I've created a sample for you.

https://stackblitz.com/edit/angular-nvf4zk-gkcnnl

In this sample, in the initial rendering, we use the generateData function in app.component.ts to generate the first data and bind to the kanban component. This function wil return normal data and it won't meet the condition. So in this case, I want to turn on the Virtualization mode. ​And if we use the generateSpeicalData function for the initial rendering, the returned data will meet the conditon; and in this case, I want to turn off the Virtualization mode ​and group data by using the swimlanes.
And I also have a button to toggle between two types of data. When we click this button, we will get the data returned from the generateData function or the generateSpeicalData function. Just like the actions above: when the data returned from the generateData function, I want to turn on the Virtualization mode.; ​  when the data returned from the generateSpeicalData function, I want to turn off the Virtualization mode ​and group data by using the swimlanes.

So Do you have any idea for this? Or any other approach to meet my requirement?

Thanks,

Nguyen

​

[Vinitha Jeyakumar]

Hi nguyen hoang phuong,

Yes, you can dynamically turn on or off the Virtualization mode with Kanban. here, we have prepared a sample for your reference,

Code snippet:

 

 <button ejs-button id="dlgbtn" #ButtonInstance (click)="BtnClick()">

      Change

    </button>

    <ejs-kanban

      #kanbanObj

      keyField="Status"

      [dataSource]="kanbanData"

      [cardSettings]="cardSettings"

      enableVirtualization="true"

    >

      <e-columns>

      ....

.......

      </e-columns>

    </ejs-kanban>

public BtnClick() {

    this.kanbanObj.enableVirtualization = !this.kanbanObj.enableVirtualization;

    this.kanbanObj.dataBind();

    this.kanbanObj.refresh();

  }

Sample: https://stackblitz.com/edit/angular-yoprpb?file=src%2Fapp.component.html,src%2Fapp.component.ts

Note: After changing the value of the enableVirtualization property, we need to call the dataBind and refresh method to refresh the layout of the Kanban board.

Regards,

Vinitha

[nguyen hoang phuong]

Hi,

Thanks for your response. 
With your suggestion, I still cannot solve my problem. Could you please refer to my sample? 

In this sample, in the initial rendering, we use the generateData function in app.component.ts to generate the first data and bind to the kanban component. This function wil return normal data and it won't meet the condition. So in this case, I want to turn on the Virtualization mode. ​And if we use the generateSpeicalData function for the initial rendering, the returned data will meet the conditon; and in this case, I want to turn off the Virtualization mode ​and group data by using the swimlanes.
And I also have a button to toggle between two types of data. When we click this button, we will get the data returned from the generateData function or the generateSpeicalData function. Just like the actions above: when the data returned from the generateData function, I want to turn on the Virtualization mode.; ​ when the data returned from the generateSpeicalData function, I want to turn off the Virtualization mode ​and group data by using the swimlanes.

Maybe, it just likes: when we use the Virtualization mode, ​we turn off the swimlanes; and when we use the  swimlanes, we turn off the  Virtualization mode.

Regards,

Nguyen

[Vinitha Jeyakumar]

Hi nguyen hoang phuong,

Yes, you can dynamically enable the swimlane mode, when turning off the Virtualization mode with Kanban. We have modified the sample as per your request. Here, we have enabled the swimlane while turning off the Virtualization and disabled the swimlane once we turn on the Virtualization.

Code snippet:

 

 public BtnClick() {

    this.kanbanObj.enableVirtualization = !this.kanbanObj.enableVirtualization;

    if (!this.kanbanObj.enableVirtualization) {

      this.swimlaneSettings = { keyField: 'Assignee' };

    } else {

      this.swimlaneSettings = { keyField: null };

    }

    this.kanbanObj.dataBind();

    this.kanbanObj.refresh();

  }

Sample: https://stackblitz.com/edit/angular-yoprpb-hfgffe?file=src%2Fapp.component.html,src%2Fapp.component.ts

You can modify the sample as per your use case,

Regards,

Vinitha

[nguyen hoang phuong]

Hi,

It works perfect now. Thanks for your suggestion!

And I have another question: Do we have any method, or any property to group the data except swimlanes when we turn on the Virtualization mode, so that we can take advantage of feature of  Virtualization mode ?

Regards,

Nguyen

[Vinitha Jeyakumar]

Hi nguyen hoang phuong,

We would like to inform you that, there is no other grouping of data available with Kanban other than swimlanes.

Regards,

Vinitha

[nguyen hoang phuong]

Hi Syncfusion Team,

I have a question. Can we dynamically turn on or off the Virtualization mode with grid component? And what necessary methods do we need to use then?

Regards,

Nguyen

[Vinitha Jeyakumar]

Hi nguyen hoang phuong,

We have created a new forum for your query related to Grid component. So please follow up on the below forum for further details,

https://www.syncfusion.com/forums/188836/dynamically-turn-on-and-off-virtualization-in-grid-branched-from-188416

Regards,

Vinitha