Infragistics(R) IgniteUI
Configuring Row Selectors
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This topic discusses how to configure row selection in the igGrid.

In this topic

This topic contains the following sections:

Required Background

The table below lists the required background you need for fully understanding the information in this topic.

Background type Content
Topics You need to first read the Enabling Row Selectors topic.
External Resources

You need to first read the following articles:

jQuery bind() API

jQuery live() API

RowSelectors Configuration Overview

The rowSelectors widget of the igGrid™ control exposes a lot of configurable options. The table below lists the configurable screen elements and behaviors manageable through the widget. For some of the behaviors/features, detailed explanations and examples are provided in the blocks following the chart.

Configurable behavior / feature Configuration details Configuration properties
Multiple rows selection By default, the RowSelectors widget has row nubmering enabled.
Selection checkboxes Determines whether the row selectors column should contain checkboxes enableCheckBoxes
Row numbering The row selectors column can contain row numbers if a property is enabled. enableRowNumbering
Canceling the check box state changing event Hook to checkBoxStateChanging event and cancel it on some condition.
Row numbering seed The seed is added to the default numbering. rowNumberingSeed
Width of the row selectors column. The width of row selectors column is configurable by setting a property. rowSelectorColumnWidth
Configurable events

For information about these events, refer to their listing in the property reference section:

igGridRowSelectors Events

Require Selection Requires the selection feature to be enabled. If selection is not enabled, an exception is thrown requireSelection

Enabling Multiple Rows Selection

Overview

Selecting cells or rows with RowSelectors requires initializing the Selection feature for the grid. RowSelectors do not initialize the Selection feature automatically and expects you to enable it if needed. Without the Selection feature, RowSelectors can still be used, for example, for their row numbering functionality. In the example below, multiple-selection is enabled. Red arrows show row selectors column.

Preview

In the picture below, RowSelectors and multiple Selection features are enabled.

Code

In HTML:

<script type="text/javascript">
    $(function () {
    $("#grid").igGrid({
        autoGenerateColumns: true,
              dataSource: source,
              features: [
                {
                    name: 'RowSelectors'
                },
                {
                    name: 'Selection',
                    multipleSelection: true
                }
            ]
            });    });
</script>

In ASPX:
    <%= Html.Infragistics().Grid(Model)
        .AutoGenerateColumns(true)
        .Features(feature =>{       
          feature.Hiding().ColumnSettings(settings =>    
            feature.Selection().MultipleSelection(true);
            feature.RowSelectors();
            }).DataBind().Render()
    %>

Adding Selection Checkboxes

Overview

Selection checkboxes are added by setting the enableCheckBoxes property to true. It is recommended, if enabling the checkboxes feature, to use multiple-selection so the user won’t need to hold Ctrl key when selecting multiple rows. Checking the row selectors’ checkboxes will also persists that selection across pages.

Preview

In the picture below demonstrates a grid with both checkboxes and paging enabled.

Property settings for enabling checkboxes

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

Property Setting
enableCheckBoxes “true”

Code

In HTML:

<script type="text/javascript">
    $(function () {
        $("#grid").igGrid({
        autoGenerateColumns: true,
              dataSource: source,
              features: [
                {
                    name: 'RowSelectors', 
                    enableCheckBoxes: true
                },
                {
                    name: 'Selection',
                    multipleSelection: true
                }
            ]
            });
    });
</script>

In ASPX:

    <%= Html.Infragistics().Grid(Model)
        .AutoGenerateColumns(true)
        .Features(feature =>{       
          feature.Hiding().ColumnSettings(settings =>    
            feature.Selection().MultipleSelection(true);
            feature.RowSelectors().EnableCheckBoxes(true);
            }).DataBind().Render()
    %>

Enabling Row Numbering

Overview

The row selector column in the grid can be used to display the sequential numbers of the rows. This is managed through the rowNumbering option of the rowSelectors widget.

Preview

In the picture demonstrates a grid with,rowNumbering enabled.

Property settings for enabling row numbering

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

Property Setting
enableRowNumbering “true”

Code

In Javascript:

<script type="text/javascript">
 $ (function () {
  $("#grid").igGrid({
      autoGenerateColumns: true,
         dataSource: source,
         features: [
            {
                name: 'RowSelectors', 
                enableRowNumbering: true
            }
        ]
    });
 });
</script>

 

In C#:

    <%= Html.Infragistics().Grid(Model)
        .AutoGenerateColumns(true)
        .Features(feature =>{       
          feature.Hiding().ColumnSettings(settings =>    
            feature.Selection().MultipleSelection(true);
            feature.RowSelectors().EnableRowNumbering(true);
            }).DataBind().Render()
    %>

Canceling the Check Box State Changing Event

Introduction

By handling the checkBoxStateChanging event, a checkbox selection can be canceled.

Overview

Following is a conceptual overview of the process:

  1. Handling the checkBoxStateChanging event
  2. Canceling the event

Steps

  1. Handle the checkBoxStateChanging event.
    1. Define a handler function

      Define a function that will be called when the checkBoxStateChanging event fires.

      In Javascript:

      <script type="text/javascript">
              
          function gridcheckboxStateChanging (evt, ui) {
       
           };   
      </script>
      
      
    2. Set the handler to the rowSelectorClicked event of the igGrid.

Once you have a handler defined, it needs to be set as the handler for the gridcheckboxStateChanging event. In jQuery, this can be done when the widget is instantiated.

In ASP.NET MVC, the event should be attached using the jQuery live or bind API. Using the live or bind API is an option for attaching the event in a pure jQuery implementation as well. The type for this event is ‘iggridrowselectorscheckboxstatechanging.

In Javascript:

$ (function () {
  $("#grid1").igGrid({
    autoGenerateColumns: true,
       dataSource: adventureWorks,
       responseDataKey: 'Records',
                features: [
                {
                  name: 'RowSelectors',
                  enableCheckBoxes: true,
                     checkBoxStateChanging: gridcheckboxStateChanging
                    ]
                },
    {
    name: 'Selection'
    }
            ]
            });
    });

2. Cancel the event.

Cancel the event by returning false.

In Javascript:

<script type="text/javascript">
        
    function gridcheckboxStateChanging (evt, ui) {
       if (conditionNotMet)
          return false;
     };   
</script>

Related Topics

Following are some other topics you may find useful.