We are currently using the new DxTreeList in our Blazor Application.
The Data we use is rather big with multiple parents and respective children, who also have children and so on.
The Data is flat, so its via Id and ParentId (no list of children is saved like its the case for in some other hierarchical data).
We noticed that when we want to expand parents that have a larger amount of children, that this process needs a few notable seconds.
Especially for cases where we throttled the network a bit (some users might have a bad connection after all).
The main problem is not only that the performance is not fast enough in these cases but also that there is no feedback for the user.
When you try to expand such a large node it looks like it is not doing anything till everything is loaded and then shown.
Meaning that in the time that it is rendering the child nodes the user might click on the expand button again since they might think they just misclicked and thats why its not loading.
But when it is loaded, then (since the expand button was clicked twice now) it will collapse instantly again.
I think you see where i am going with this.
Is there a solution we might have missed?
Simplyfied (else it would have been confidential) Code for visualization how we use it:
(The Column amount is the same tho)
Code<DxTreeList @ref="this._refTreeList"
AllowColumnReorder="false"
CssClass="css-treelist"
Data="@this._data"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
ShowFilterRow="true"
VirtualScrollingEnabled="true">
<Columns>
<DxTreeListDataColumn Caption="Description"
FieldName="Name" />
<DxTreeListDataColumn Caption="State"
FieldName="Selected"
Width="50px">
<CellDisplayTemplate>
<div class="state-column">
<DxCheckBox Checked="true"
CheckedChanged="(bool value) => this.SomeMethod(value)" />
</div>
</CellDisplayTemplate>
</DxTreeListDataColumn>
</Columns>
</DxTreeList>
Hi,
I created a small sample project with a runtime dataset of 1,000,000 records. On my end, the initial rendering takes some time, however, afterwards, I did not notice any delays with expand/collapse operations. With the throttled network, expand / collapse operations take longer, however, I did not replicate consistent delays of multiple seconds. Please see the attached video (I used a DxLoadingPanel to indicate when the component is fully rendered). If the behavior on your end is different (e.g., you experience delays even with unthrottled network), could you please modify the project so that it replicates it? There may be other aspects of your use case that affect this behavior.
In general, to improve performance and reduce overall memory consumption when working with large datasets, we recommend binding TreeList to data via GridDevExtremeDataSource or handling the ChildrenLoadingOnDemand event in order to supply child nodes on demand. See these demos:
Large Dataset
Load Data on Demand
Unfortunately, at present, there is no built-in functionality to display a loading indicator during expand/collapse operations. I shared your feedback with our development team.
I look forward to hearing from you.