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.
I have been looking into your question and found this topic in our documentation where is demonstrated how to configure Load on Demand by creating a Remote Service Provider that communicates with an already available remote oData v4 Service. The provided sample is using the Customers data from services.odata.org/.../ for root level and Order and Order_Details for the lower levels. After you get the data and could access it, you could create an igx-row-island for each child table using their keys. A step by step description of the process of creating it as well as sample demo could be found in the provided topic.
Regarding your second question about "parent records that do not have child, records won't have expanded/collapse indicator. " I can suggest using the onRowToggle event, which fires every time a row is collapsed or expanded. A method could be bound to the event, where by the rowID it is determined whether this row has children or not, and if there are no children the event is being canceled. In order the event to fire for child rows except of the grid tag, the onRowToggle should also be placed in all row-islands. Also, you could re-template the igxRowCollapsedIndicator and hide it if the row has no children.
Here could be found a sample application that demonstrates this approach.
Additionally, please keep in mind that according to our policy we handle an issue per case, and since this theme is regarding differences between Tree Grid and Hierarchical Grid, my suggestion is to create another forum thread with your new question. This is for better consistency and history tracking.
Sincerely,Teodosia HristodorovaAssociate Software Developer
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards,Teodosia HristodorovaAssociate Software Developer