Feature Inheritance in Infragistics jQuery Hierarchical Grid

The IG jQuery Hierarchical Grid is mainly used to display hierarchical data. You can either manually add the column layout specifications or allow them to auto-generate based on the data source. The feature inheritance allows you to easily propagate settings across all levels of data.

If you manually describe all the column layout settings like columns and their features you might hit a situation where you have many levels and keeping the set of enabled features consistent is difficult and unmanageable. If you use auto-generation you don’t have access to modify the column layout settings of sub levels at all. Those two situations are where the feature inheritance comes in handy the most.

Before I demonstrate how to enable the feature inheritance lets set up a hierarchical grid and fill it with several levels of data. If you know how to do this you can safely skip this section and go directly to “Feature Inheritance” further down the article.

Creating the Hieararchical Grid and Loading it with data

First we need to add the necessary scripts and css files. I’ll use the CDN location as this is easiest to do and requires minimum effort. Just choose the right release and build version you want to use and add the references. Here is what I use for this demo (HTML based):

We also need to decide what data source to use for the grid. In this article I will use the adventure works database and in order to use it (just for demonstration purposes) I’ll reference it from the Infragistics samples webpage. Here is how to include it:

 

 

In this js file there is a variable called adventureWorksCustomerSales that we are going to use as data source later in this article.

After we have the required references in place we can add a div that we’ll transform in our control. I’ll give it an id=“hierarchicalGrid”. Then we need to hock up to the window’s load event and initialize the grid. I’ll set the data source as mentioned and then set the autogeneration of columns and layouts to auto, which will create all the hierarchies and columns I need automatically for me. I will also set up a few basic features like Sorting, Summaries and Paging, with which we will show how to do the Feature Inheritance.

So here is my code that initializes the hierarchical grid:

 

 

Here is how our app will look like after writing that code.

Feature Inheritance

Now we come to the point of this article – we set up the features we wanted, but they are applied by default only to the top level of the grid and not on the child layouts. If we want to expand one of the rows we will find out that the sub grids are not sorting, not paging and don’t show summaries. More over because we used auto generation of the layouts and columns we can’t even turn the features on even explicitly. And even if we did set the columns and layouts manually if there is several levels it might be cumbersome to keep everything consistent and robust. This is where the Feature Inheritance comes to our aid.

Each object describing a feature has a property called inherit. Its default is false and that’s why nothing is propagated to the child layouts by default. Setting it to true enables the inheritance and the sub layouts receive this feature’s settings. Like so:

 

 

This is how expanding the second row looks like without the inheritance

And here is how it looks after we propagated the features

That was all you need to know about feature inheritance. By setting the inherit property of a feature you can control how it propagates through layouts in a hierarchical grid, even if those layouts are not explicitly defined. To see a working demo of the code that was used here go to this link.

I hope this has been useful and interesting for you. Have an awesome day!