This topic explains how to configure the igHierarchicalGrid™ control for binding it to View-Model objects managed by the Knockout library.
The following table lists the topics and external resources required as a prerequisite to understanding this topic.
igHierarchicalGrid control.igHierarchicalGrid.igGrid and how it interacts with the igDataSource™ component to enable binding to various data sources.This topic contains the following sections:
The igHierarchicalGrid control’s support for the Knockout library provides developers with an easy means for using the Knockout library and its declarative syntax to instantiate and configure grid controls.
The Knockout support is implemented as a Knockout extension which is initially invoked when Knockout bindings are applied to a page and during the page life (when external updates to the View-Model take place).
To instantiate an igHierarchicalGrid bound to Knockout-managed data structure, you need to specify igHierarchicalGrid configuration options into the data-bind attribute of a table element. This renders the grid at the specified location on the element just like creating the control using JavaScript. For information on configuring this option refer to Configuring igHierarchicalGrid with Knockout section below. Additionally, you may specify any of the other igGrid options that have relevance to your business case using the data-bind attribute.
The igHierarchicalGrid uses the igGrid Knockout extension, which ensures that anytime changes occur to the igHierarchicalGrid data, either by editing, adding or deleting a row, the extension notifies the observable and updates all its corresponding views. It also ensures that if some external view is updated, the observable in the extension will update the igHierarchicalGrid data.
The following table maps the configuration tasks of the igHierarchicalGrid control related to Knockout usage scenarios to the respective properties that manage those tasks.
| Configuration task | Required | Details | Properties |
|---|---|---|---|
| Binding the View-Model object’s field to the column keys | Yes | The Knockout binding requires the key property of the grid’s columns to be specified. This enables the data exchange between the grid and the View-Model. | column.key |
| Specifying the data source | Yes | The data source option should be set to the observable data. | dataSource |
| Specifying the column layouts | Yes | The columnLayouts option should be specified. | columnLayouts |
The following example demonstrates the basic configuration of an igHierarchicalGrid control bound to a Knockout observable View-Model object.
In this implementation, the first row of the hierarchical grid parent/child layout is bound using a standard two-way binding.
Following are some other topics you may find useful.
The following information is available outside the Infragistics family of content and provides additional information related to this topic.
View on GitHub