Unbound Columns Overview (igGrid)

Topic Overview


This topic explains conceptually the Unbound Columns feature of the igGrid™ control and the functionalities this feature provides.

Required background

The following topics are prerequisites to understanding this topic:



  • igGrid Overview: This topic provides an overview of the igGrid control and explains how to add it to an HTML page.

  • igGrid Architecture Overview: This topic explains the inner workings of the igGrid and how it interacts with the igDataSource™ component to enable binding to various data sources.

In this topic

This topic contains the following sections:


The Unbound Columns feature of the igGrid control enables defining of columns that are not directly bound to a field in the underlying data source.Unbound columns can display either arbitrary lists of items or calculated values (usually based on other columns’ values). This can be used for creating summaries on per row basis (rather than out-of-the-box summaries) for columns. Other typical uses of unbound columns involve cases when one data model is either not enough and out of your control or when you need data from different sources.

Unbound columns have the same properties as normal (bound to a data source) columns. The Unbound Columns feature supports and works with all grid features – Sorting, Filtering, and so on. This includes also the standard column enhancements like column templates and formatters.

Setting a Column as Unbound

A column is configured as unbound by setting the unbound column property of the igGrid to true. (The setting of this property differentiates an unbound column from a bound one: true = unbound column, false = bound column.) Setting this property to true causes that particular column to be omitted when binding to the data source and you essentially can get an empty column with no relation to the data model.

Just like with normal (bound) columns unbound columns needs to be uniquely identified by setting the key property.

You can populate unbound column values in several ways. If column values are pre-defined, use the column's unboundValues property or the grid’s setUnboundValues method. If a column values are to be calculated, use the column's formula or template properties.

The sample bellow demonstrates configuring unbound columns in the igGrid control.

Configuring Unbound Columns

The following table lists the configurable aspects of the Unbound Columns of the igGrid feature. Additional details are available in separate topics (links provided in the table).

Configurable aspect Details Properties
Populating with data 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.
Related topics
Populating Unbound Columns with Data (igGrid)
  • unbound
  • unboundValues
Populating unbound calculated values To populate an unbound column with calculated values, use a callback function which calculates the value for each cell.
Related topics
Populating Unbound Columns with Data (igGrid)
  • unbound
  • formula
Populating unbound column values using template A template can be used 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.
  • unbound
  • template
Formatting Formatting a column using predefined format string Format can be applied to the unbound column based on its type.
  • unbound
  • format
Formatting a column using formatter function Format can be applied to the unbound column by using a formatter function callback. The function returns the new value. Formatter function affects only the presentation of the data and doesn’t modify the underlying data source.
  • unbound
  • formatter
Formatting a column using a template A template can be used in addition to or as an alternative to unboundValues or formula properties. The template can set the formatting of the unbound column’s values.
  • unbound
  • template

Related Content


The following topics provide additional information related to this topic.

View on GitHub