Gantt treelist - show/hide and reorder columns

[Vedad]

Hi,

I just upgraded to Kendo UI 2021 R1 version from 2020 R2.

Now I am trying to implement simple predefined (column) views for my gantt widget.

I have approx. 35 possible columns for my gantt and five "config" arrays which define which columns should be visible and in which order (usual case is 5-10 columns visible at the time). I have five buttons which trigger reorder and show/hide columns methods from gantt list.

I made this to work, but this tends to be quite slow specially if my project has many elements in tree.

Just to reorder elements before showing/hiding them, it takes more than half second (closer to 1 sec) per item to reorder as shown below.

measure reorder 0.9938250000122935
measure reorder 0.84582499996759
measure reorder 0.8179099999833852
measure reorder 0.8124349999707192
measure reorder 0.8222400000086054
measure reorder  0.670899999910034

Then, to show desired columns and hide others it takes additional 0.5 sec per hide/show method. (see below)

measure  show 0.5577549999579787
measure  show 0.43599000002723187
measure  show 0.4385149999288842
measure  show 0.42784000001847744
measure  show 0.44247000000905246

measure hide 0.4437199999811128
measure hide 0.440279999980703
measure hide 0.4344099999871105
measure hide 0.43585499993059784
measure hide 0.4289250000147149
measure hide 0.4369650000007823

This results in quite slow response - changing of views takes between 2 (smaller projects) to 10 seconds (medium/bigger projects).

measure table switch 9.914615000016056

Is there any better way to do this or could I simply prepare view in behind and replace current gantt.list.columns array with new one - because this switching logic is not acceptable from performance of point of view.

UPDATE: I tested further - seems that depth and how much tree is expanded is making a big impact on performance.

Thank you and best regards,

Vedad

[Veselin Tsvetanov]

Hi Vedad,

The issue faced is caused by the fact that each reorder, show, and hide call will force redraw of the entire Gantt widget. Having that said, I would recommend you to destroy the widget entirely, clear the contents of its element and recreate the widget with the new columns options:

var gantt = $("#gantt").getKendoGantt();
gantt.destroy();
$("#gantt").empty();
$("#gantt").kendoGantt({
    [new options]
});

The above will cause additional read requests for the widget's tasks, dependencies, resources, and assignments. It will, however, rerender the Gantt only once and that should reduce considerably the performance hit observed.

Regards,
Veselin Tsvetanov
Progress Telerik

[Vedad]

Hi Veselin,

I was hoping you won't tell me that with redraw :(

Thanks for proposed idea. However, this is something I already have as older version of gantt didn't have options for showing and hiding columns.
Side effect of this is that if you have large data with deep structure (5-6 hierarchy levels) in gantt list it again takes some time (we had cases where even rendering project of 1 year with 750-1000 elements can take up to 20-25 seconds to render), but I guess we will have to stick to it until something is changed.

Thanks