Infragistics(R) NetAdvantage(R) jQuery
Configuring Row Selectors for igHieararchicalGrid
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

Demonstrates, with code examples, how to configure the igHierarchicalGrid™ control’s Row Selection feature.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic

Purpose

igHierarchicalGrid Overview

Provides conceptual information about the igHierarchicalGrid control, including: features, data binding, requirements, templates, and interaction.

Initializing the igHierarchicalGrid

Demonstrates how to initialize the igHierarchicalGrid using both jQuery and MVC.

Demonstrates how to enable the igHierarchicalGrid control’s row selection using jQuery and ASP.NET MVC.


In this topic


Row Selection Configuration Summary

Row selection configuration chart

Here are the configurable aspects of the row selection feature. These aspects are managed through the respective properties of the igGridRowSelectors widget. Detailed explanations and examples of some of the behaviors and features of the widget follow the table.

Configurable aspects

Details

Properties

Selection of multiple rows

By default multiple row selection is enabled. This is controlled through the igGridSelection control.

multipleSelection (igGridSelection)

Selection with checkboxes

Enables checkboxes in the Row Selectors column.

Row numbering

When enabled, allows row numbering of the Row Selectors column.

Row numbering starting value

Allows Row numbering to start from a custom value.

Width of the row selectors column

Sets the width of the row selector column.

Require a Selection to configure

Causes the control to throw an exception if the Selection feature is disabled.



Enabling Multiple Rows Selection

Overview

Initializing the Selection feature for the grid enables cell or row selection using the igHierarchicalGrid control’s Row Selection feature. This does not automatically initialize the selection feature you must enable it if you need it. The Row Selection can still be used without the selection feature, for example for row numbering.

Property settings

The following table maps multiple row selection to property settings.

In order to:

Use this property:

And set it to:

Use multiple rows selection

(igGridSelection)

true


Example

In the picture below, Row Selection and Selection features are enabled. A red rectangle designates the Row Selectors column.

Code

In HTML:

Code
<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                }
            ]
        });
    });
</script>
<%=
Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().Inherit(true);
            features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
            features.Paging().Type(OpType.Local).PageSize(5);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

Adding Selection Checkboxes

Overview

Checkboxes are added by setting the igGridRowSelectors control’s enableCheckBoxes property to true. It is recommended that you use multiple-selection if checkboxes are enabled. This will allow the user to select multiple rows without holding down the Ctrl key. When Row Selectors checkboxes are enabled the multiple-selection behavior persists across pages.

Property settings

Use the igGridRowSelectors control’s enableCheckBoxes property to configure the checkboxes feature.

In order to:

Use this property:

And set it to:

Enable row selector checkboxes

true


Example

The picture below shows a hierarchical grid with row selectors checkboxes enabled. The red ellipse emphasis the checkboxes on the first two master rows.

Code

In HTML:

Code
<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    enableCheckBoxes: true
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                },
                {
                    name: 'Paging',
                    type: 'local'
                }
            ]
        });
    });
</script>
<%=
Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().EnableCheckBoxes(true).Inherit(true);
            features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
            features.Paging().Type(OpType.Local);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

Enabling Row Numbering

Overview

You can also render sequential row numbering for all rows in the row selector column in a grid. This is managed through the rowNumbering option of the igGridRowSelectors widget.

Property settings

The table below maps the desired configurations to property settings. The properties are accessed through the igGridRowSelectors options.

In order to:

Use this property:

And set it to:

Enable row numbering

rowNumbering

true


Example

The following screenshot illustrates the rendering of a grid with row selectors enabled:

Code

In HTML:

Code
<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    enableRowNumbering: true
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                }
            ]
        });
    });
</script>
<%=
Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().EnableRowNumbering(true).Inherit(true);
            features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
            features.Paging().Type(OpType.Local);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

Configuring Seed to the Default Numbering

Overview

The first number for sequential row numbering can be manually configured by assigning a seed value. This is managed through the rowNumberingSeed option of the igGridRowSelectors widget.

Property settings

The table below maps the desired configurations to property settings. The properties are accessed through the igGridRowSelectors options. Note that the first row number does not start with the value of the seed, but rather the seed is incremented by 1 and then assigned to the row.

In order to:

Use this property:

And set it to:

Offset row numbering with 10

9


Example

The screenshot below demonstrates how a grid with offset row numbering looks:

Code

In HTML:

Code
<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    enableRowNumbering: true,
                    rowNumberingSeed: 9,
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                }
            ]
        });
    });
</script>
<%=
Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().Inherit(true)
                .EnableRowNumbering(true).RowNumberingSeed(9);
            features.Selection().Mode(SelectionMode.Row)
                .MultipleSelection(true);
            features.Paging().Type(OpType.Local);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

Setting the Width of the Row Selector Column

Overview

Configure the row selector column’s width of through the igGridRowSelectors widget’s rowSelectorColumnWidth option. The width can be set in pixels (“75px”) as well as in percent (“10%”). If no value is set then the widget automatically sets the width is to an appropriate value.

Property settings

The table below maps the desired configurations to property settings. The properties are accessed through the igGridRowSelectors options.

In order to:

Use this property:

And set it to:

Set the row selector column width to 75 pixels

“75px”


Example

The following screenshot below illustrates the rendering of a grid’s row selector column with its width set to 75 pixels. The enlarged width is emphasized with the red arrow and line.

Code

In HTML:

Code
<script type="text/javascript">
    $(function () {
        $("#grid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: data,
            dataSourceType: "json",
            responseDataKey: "Records",
            autoGenerateColumns: true,
            autoGenerateLayouts: true,
            primaryKey: "ID",
            features: [
                {
                    name: "RowSelectors",
                    enableRowNumbering: true,
                    rowSelectorColumnWidth: "75px",
                    inherit: true
                },
                {
                    name: "Selection",
                    multipleSelection: true,
                    mode: "row"
                }
            ]
        });
    });
</script>
<%=
Html.Infragistics()
    .Grid(Model)
    .ID("grid")
    .Features(features =>
        {
            features.RowSelectors().Inherit(true)
                .EnableRowNumbering(true).RowSelectorsColumnWidth("75px");
            features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
            features.Paging().Type(OpType.Local);
        })
    .AutoGenerateColumns(true)
    .AutoGenerateLayouts(true)
    .DataBind()
    .Render()
%>

Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

Demonstrates, with code examples, how to enable the Row Selection feature in jQuery and in ASP.NET MVC.


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

Row Selectors

Displays a hierarchical grid and allows row numbering and row selector column width to be set at runtime.

Row Selector Checkboxes

Displays a hierarchical grid with row selector checkboxes enabled and row numbering starting at 100.