if you can point to article or describe in short paragraph what is the major difference between tree-grid and h-grid. What one has that another does not. Seems like both support hierarchical data structure representation.. I am starting project presenting hierarchical data where child records for different parents will have several data structures types.. wonder which one would fit better.
Thanks
Hello,
I have been looking into your question and what I can say is that while IgxTreeGrid and IgxHierarchicalGrid are both created to present hierarchical data, there are distinctions when you may want to select one over the other. The biggest distinguishing factor among the two grids is that the IgxTreeGrid displays each row using the same columns, while the IgxHierarchicalGrid supports the ability render data with varying schemas among different hierarchical levels.
In addition to this I have summarized the most important features and limitations for both components:
Tree Grid
- The child data should have same structure as the parent collection.
- The IgxTreeGridComponent provides us with a couple of ways to define the relations among our data objects - by using a child collection for every data object or by using primary and foreign keys for every data object.
- the tree grid's rows are constructed of two types of cells:
IgxGridCellComponent - Ordinary cell that contains a value.
IgxTreeGridCellComponent - Tree cell that contains a value, an expand/collapse indicator and an indentation div element, which is based on the level of the cell's row.
- Initially the tree grid will expand all node levels and show them. However, this behaviour could be changed.
- The indentation of the tree cells persists across other tree grid features like filtering, sorting and paging.
-limitation: When templating a tree cell, content that spans outside the boundaries of the cell will not be shown unless positioned in an overlay.
Hierarchical Grid
-supports child data with a different data schema from the parent
- igx-hierarchical-grid derives from igx-grid and shares most of its functionality. The main difference is that it allows multiple levels of hierarchy to be defined. They are configured through a separate tag within the definition of igx-hierarchical-grid, called igx-row-island. The igx-row-island component defines the configuration for each child grid for the particular level. Multiple row islands per level are also supported.
-The following grid features work on a per grid level, which means that each grid instance manages them independently of the rest of the grids: Sorting, Filtering, Paging, Multi Column Headers, Hiding, Pinning, Moving, Summaries, Search.
-creates separate igxGrid instance (with its full DOM) for each child layout as well as for the root data
-limitation: Export to Excel is currently not supported by the Hierarchical Grid, but it would be available in future versions of Ignite UI for Angular.
If you require any further assistance on the matter, please let me know.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
Thanks a lot for detailed answer.. I'll be using hierarchical grid, as the structure of my child grids not only different from the parent records it also different between themselves, so different parent records will have up to five different type of child records...
To that end I would like to ask question regarding binding.. this is not to ask for all the details and/or 'how' but rather if there is a way. On the sample I've seen binding done by from JSON object having child structures right after each parent record.. Is there a way to bind data to the grid different way, such as having multiple JSON objects ( Six in my case - One parent records and 5 with child records ) and having it works through having foreign keys in child data linked to primary key in parent data set.. as sample below.. so in that data schema, for example, the parent record with idMaster = 10 will have 5 child records etc. and parent records that do not have child records won't have expand/collapse indicator..
Thanks.