Version

Row Selectors Events (igGrid)

Purpose

This topic explains the events that are specific to the RowSelectors widget of the igGrid™.

In this topic

This topic contains the following sections:

Events Overview

There are three events that are specific the RowSelectors widget. (See the Events Reference Chart block below). The checkBoxStateChanging event is cancelable and the propagation can be terminated when in such handler we return false.

In Javascript:

$("#grid1").igGrid({
features: [
     {
          name: 'RowSelectors',
          enableCheckBoxes: true,
          checkBoxStateChanging: function (ui, args) {
               return  false;
          }                
     },
     {
         name: 'Selection'
     }
  ]
});

Most of the argument methods and properties contain row-specific data, as well as the grid they belong to.

Attaching Handlers to Events in jQuery and MVC

To attach to an event, you just need to define a handler for it, in the same way you define a property. Now, if the event is triggered, the handler will be called.

In Javascript:

$("#grid1").igGrid({
     responseDataKey: 'Records',
     features: [
          {
               name: 'RowSelectors',
                       enableCheckBoxes: true,
               rowSelectorClicked: function(evt, ui) {
                     // Handle event  
               }              },
          {
            name: 'Selection'
          }
     ]
});

When attaching a handler in MVC, you need to use the jQuery UI pattern which is a concatenation of the names of the control and the event in lowercase letter format.

In Javascript:

$("#grid1").on("iggridrowselectorsrowselectorclicked", function (evt, ui) {
      // Handle event  
   }
);

Note: For more information please read the topic Using Events in Ignite UI for jQuery.

Events Reference Chart

Event Description Cancelable
rowSelectorClicked Fired after a row selector is clicked.
Function takes arguments evt and ui.
Use ui.row to get reference to the row the clicked row selector resides in.
Use ui.rowIndex to get the index of the row the clicked row selector resides in.
Use ui.rowKey to get the key of the row the clicked row selector resides in.
Use ui.rowSelector to get reference to the row selector cell.
Use ui.owner to get reference to igRowSelectors.
Use ui.grid to get reference to the igGrid the igRowSelectors are initialized for.
checkBoxStateChanging Fired when a row selector checkbox is changing.
Function takes arguments evt and ui.
Use ui.row to get reference to the row the clicked row selector resides in.
Use ui.rowIndex to get the index of the row the clicked row selector resides in.
Use ui.rowKey to get the key of the row the clicked row selector resides in.
Use ui.rowSelector to get reference to the row selector cell.
Use ui.owner to get reference to igRowSelectors.
Use ui.grid to get reference to the igGrid the igRowSelectors are initialized for.
Use ui.currentState to get the current state of the checkbox ("on","off").
Use ui.newState to get the new state of the checkbox ("on","off").
Use ui.isHeader to check if the header check box is the one being clicked. In this case no row related args are passed.
checkBoxStateChanged Fired after a row selector checkbox had changed state.
Function takes arguments evt and ui.
Use ui.row to get reference to the row the clicked row selector resides in.
Use ui.rowIndex to get the index of the row the clicked row selector resides in.
Use ui.rowKey to get the key of the row the clicked row selector resides in.
Use ui.rowSelector to get reference to the row selector cell.
Use ui.owner to get reference to igRowSelectors.
Use ui.grid to get reference to the igGrid the igRowSelectors are initialized for.
Use ui.state to get the state of the checkbox ("on","off").
Use ui.isHeader to check if the header check box is the one being clicked. In this case no row related args are passed.

Related Topics

View on GitHub