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.
igGridand how it interacts with the
igDataSource™ component to enable binding to various data sources.
This topic contains the following sections:
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
igGrid options that have relevance to your business case using the data-bind attribute.
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
The following table maps the configuration tasks of the
igHierarchicalGrid control related to Knockout usage scenarios to the respective properties that manage those tasks.
|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.