This topic provides a conceptual overview of how an unbound column can be populated with data and briefly explains the options (local/remote).
The following topics are prerequisites to understanding this topic:
Unbound Columns Overview: This topic provides an overview of the Unbound Columns feature of the igGrid.
Setting a Column as Unbound (igGrid): This topic demonstrates how to set up an Unbound Column for the igGrid on the client and on the server. It includes JavaScript and ASP.NET code snippets.
This topic contains the following sections:
You may populate unbound columns with data on the client or the server (if you are using Ignite UI for MVC) using predefined data (for example from an external source) or calculates the data from the grid data source.
On the client, you can populate the values as part of the grid initialization code or at runtime (after the grid instantiates).
On the server, populate unbound column with data in two ways. First scenario is using the grid’s primary key value in order to match the unbound values dictionary to the grid data. Second is using a list of unbound values.
| Populating unbound column values with pre-defined data |
An unbound column is populated with arbitrary values (pre-defined data set) with the unboundValues array property. The type of the items in the array must match the type of the unbound column. The number of items in the array may not equal the number of items in the data source.
Note: If both |
|
| Populating unbound calculated values |
To populate an unbound column with calculated values, use a callback function that calculates the value for each cell.
formula property accepts function which has two parameters:
Note: If both |
|
| Populating unbound column values using template |
Use a template in addition to or as an alternative to unboundValues or formula properties. The template can populate an unbound column with data from the other columns.
|
|
In order to populate unbound column data as part of the grid initialization code use the unboundValues property, formula property or the grid’s dataBound event. unboundValues accepts array of values and requires unbound data to be predefined. dataBound event and formula property allow data to be calculated from the grid data source. In the dataBound event use the $.ig.DataSource.data method to get grid data and set the unbound column data. formula property is a function callback which accepts row (current data row to process) and grid instance parameters.
In order to populate unbound column data at runtime use igGrid.setUnboundValues or igGridUpdating.setCellValue. setUnboundValues accepts column key and array of values as a parameters and populates multiple values at once. setCellValue accepts row id(primary key or the row), column key and value parameters and populates only one cell at a time and requires Updating feature.
Related Topics
In Ignite UI for MVC unbound columns can be set in either the View (when using chaining) or in the Controller (when using GridModel class).
In the View you can populate unbound column data by using an object list with the UnboundColumnWrapper<T>.UnboundValues(List<object> list) method. There is also a Formula method which should be set to a name of a JavaScript function which will be called on the client for each cell to calculate its value.
In the Controller you can use two overloads of GridModel.SetUnboundValues method.
The first method (GridModel.SetUnboundValues(string key, Dictionary<object, object> values)) accepts column key and a dictionary of objects where the key is the primary key value of the grid data and the value is the value of the unbound column. Unbound column values are matched by primary key.
The second method (GridModel.SetUnboundValues(string key, List<object> values)) accepts column key and a list of objects. Unbound column values are matched by order of the elements.
Related Topics
The following topics provide additional information related to this topic.
Updating Overview (igGrid): This topic explains how to use the Updating feature of the igGrid control.
Populating Unbound Columns Locally (igGrid): This topic demonstrates, with code samples how to set unbound column values on the client.
Populating Unbound Columns Remotely (igGrid): This topic demonstrates, with code samples how to set unbound column values on the server.
View on GitHub