Set Initial Depth/Levels Displayed

Sir, in your tree grid control how do I set the level of nodes shown when the grid renders?


I understand that can user collapseAll() to cause the grid to be rendered with all nodes collapsed, or without collapseAll() the grid is rendered with all nodes expanded. But lets say I want all callapsed except the Level 1 and Level 2 nodes.  Can this be do




4 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 27, 2022 02:18 PM UTC

Hi James,


Query#:- I want all collapsed except the Level 1 and Level 2 nodes.


From your query we suspect that you need to Expand only specific level of rows(For example Level 1 and Level 2) on render. To achieve this, we have expandAtLevel method to expand only specific level by passing the level.


Reference documentation link:-

https://www.syncfusion.com/kb/12049/how-to-expand-or-collapse-all-level-child-of-root-node-in-tree-grid


API link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#expandatlevel

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#collapseatlevel

or https://ej2.syncfusion.com/angular/documentation/api/treegrid/#expandbykey


Sample link:- https://stackblitz.com/edit/angular-treegrid-collapse-level2-qzsrbw?file=main.ts


If you are facing any difficulties on this, please share detailed Explanation of requirement with Screenshot of Structure you have expected to proceed further.


Regards,

Farveen sulthana T



JA James May 28, 2022 10:53 PM UTC

Thanks Farveen. However the method expandAtLevel(x) doesn't work correctly . It doesn't work in your stackblitz example - it doesn't work at all, it makes a complete mess of the data. Just play with it yourself and you will see it doesn't work at all

For example

In your StackBlitz example you define hierarchical data of the format as shown below. If you set expandAtLevel(0)  I would expect to see ID1 and ID6 only. Try it youself, and see what happens

 If you set expandAtLevel(1) I'd expect to see ID1 and its child ID2, and ID 6 and its child ID7. Try it yourself and see what happens. ID2 complete vanishes from the Tree and it is all messed up.


2) Also, it messes up columns that are Hidden, they become unhidden. 

3) What is the boolean 'initialRender' ? It is not documented, and is marked as 'hidden' in your control, so it must be an internal boolean.


I have created a incident report


--YOUR DATA---

-->ID1

----> ID2

------>ID3

-------->ID4

---------->ID5

-->ID 6

---->ID7

------>ID8

-------->ID9

------------>ID10

------------>ID11



JA James May 28, 2022 11:23 PM UTC

Please ignore the comment on it messing up the hidden columns, this may not be true, I need to investigate more



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 30, 2022 03:53 PM UTC

Hi James,


Query: the method initialRender() does not work, it makes a complete mess of the tree and does not expand nodes at all. 


On further analyzing, in your shared sample, you are using the 18.3.47 version. After upgrading to version 20.1.56, this issue is not reproduced. So,we suggest you to use the latest version.


Please refer to the below sample,

https://stackblitz.com/edit/angular-treegrid-collapse-level2-vjk3bx?file=app.component.ts


Please refer to the below screenshot, Here we have expanded the level 1 records at initial rendering.



Query: expandAtLevel(0)  I would expect to see ID1 and ID6 only.  If you set expandAtLevel(1) I'd expect to see ID1 and its child ID2, and ID6 and its child ID7.

By default, using the expandAlLevel method to expand the 0th level, it will show the 0th level records and their child records.


Please refer to the below screenshot,


Here ID 1 is parent record ID2 is Child Record of ID1 and ID6 is parent record ID7 is Child Record of ID6.

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid/#expandatlevel

If we misunderstood your requirements, kindly share the detailed explanation of your requirements, and share video demo/ screenshot of your requirement and share the TreeGrid’s package version details which is helpful to proceed further.


Regards,

Farveen sulthana T


Loader.
Up arrow icon