This topic provides conceptual information about the igHierarchicalGrid™ including information regarding features, binding to data sources, requirements, templates, and interaction.
In this topic
This topic contains the following sections:
- Main Features
- ASP.NET MVC helper
- Binding Requirements
- Related Topics
The igHierarchicalGrid is a control for displaying hierarchical data with multiple levels and multiple layouts (relationships) on the same level. Because the igHierarchicalGrid uses internally the flat igGrid all its features are also available for the igHierarchicalGrid. This topic discusses the igHierarchicalGrid-specific features and will only provide links to the igGrid-specific features.
The picture below shows the igHierarchicalGrid with one of its rows expanded.
The table bellows lists the background you need for fully understanding the information in this topic.
You need to first read the following topics:
igGrid/igDataSource Architectural Overview, The Data Source Control section
|External Resources||You need to first read the following article: Working with jQuery Widgets|
The table below briefly explains the main igHierarchicalGrid-specific features.
|Columns||Lets you choose wither do define the columns by hand or to let the igHierarchicalGrid do it automatically.|
|Column Layouts||Creates a layout or lets the igHierarchicalGrid do it automatically.|
|Load On Demand||Loads data to a row when the row is expanded.|
|Inheritance||Allows child layouts to inherit their parents’ features.|
The igHierarchicalGrid has events responsible for expanding and collapsing the child row and populating the child layouts.
|Animation and Styling||
A set ofAPI properties that allow you to change the expand/collapse animation.
An addition to the the specific features, the igHierarchicalGrid uses all igGrid features:
- Row Selectors
- Group By
- Feature Chooser
Columns and layouts
Defining a column is the same like defining column in a flat grid. Inside the columns collection, you define the columns to display, together with the column-settings.
The property that is used to set the layout options that are not inherited from the parent is called columnLayouts. Inside this object you can define the child layout objects and their respective options.
Load on demand
If you want to load only the visible data, the igHierarchicalGrid allows you to do this by first loading the parent data only and after that loading every the column layout data.
If you want the same feature for the child layouts as they are configured on the parent, you can use inheritance – define the feature in the parent layout and then enable inheritance for the lower levels.
The igHierarchicalGrid uses internally all igGrid feature events. In addition to that, he has some specific events for expanding and collapsing rows and populating a child grid.
Styling and Theming
The igHierarchicalGrid has plenty of properties that allow you to change the animation behavior when expanding and collapsing child layouts. It also supports all classes of the jQuery UI CSS Framework. This enables you apply styling using third-party tools, like jQuery Theme Switcher.
ASP.NET MVC helper
You can use the ASP.NET MVC Helper for managed code languages to configure the igHierarchicalGrid. The MVC wrapper for the igHierarchicalGrid uses the same code as the flat igGrid wrapper. That’s why, as it is in the flat igGrid, the features’ logic is automatically handled by the MVC wrapper and you don’t need to create implementation for features like paging, sorting, filtering, summaries, as the requests It from these features are handled internally.
Binding requirements reference chart
The following table lists the requirements for binding the igHierarchicalGrid control to data sources grouped by requirement category.
|Requirement category||Requirements listing|
Can be any of the following:
Well-formed JSON or XML supplied locally or from a web server, including servers that supports oData protocol.
IQueryable in ASP.NET MVC
Following are some other topics you may find useful.
- NetAdvantage for jQuery Overview
- Touch Support for NetAdvantage for jQuery Controls
- Styling and Theming NetAdvantage for jQuery
- The Data Source Control
- Working with jQuery Widgets
- Initializing the igHierarchicalGrid
- igGrid Properties Reference
- igHierarchicalGrid Properties Reference
- igHierarchicalGrid Columns and Layouts
- igHierarchicalGrid Load on Demand
- igHierarchicalGrid Feature Inheritance
- igHierarchicalGrid Events API
- igHierarchicalGrid Styling and Theming
- igGrid Feature Chooser