This topic provides a reference for events the Row Selectors feature of the igHierarchicalGrid™ control and code examples about handling these events.
Prerequisite topics required to understand this material.
This topic contains the following sections:
There are three events specific to the igGridRowSelectors widget:
checkBoxStateChangingcheckBoxStateChangedrowSelectorClickedThe checkBoxStateChanging event may be canceled, and propagation can be terminated when the event handler returns false.
The purpose and function of the igGridRowSelectors control’s events.
| Property | Description | Can be Stopped | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| rowSelectorClicked |
Raised after clicking on a row selector. The handler function takes arguments evt and ui. The ui argument options and their usage
follow.
|
|
||||||||||||||||||||
| checkBoxStateChanging |
Raised when a row selector checkbox is changing. The handler function takes arguments evt and ui. The ui argument options and their
usage follow.
|
|
||||||||||||||||||||
| checkBoxStateChanged |
Raised after a row selector checkbox changes state. The handler function takes arguments evt and ui. The ui argument options and
their usage follow.
|
|
Assigning an event handler functions as a common option to the igGridRowSelectors control’s rowSelectorClicked event at initialization. When the event occurs the handling function is called. However, the event handler is no longer called if the control is destroyed and recreated without the handler being reassigned.
An example of assigning event handling function to the rowSelectorClicked event at initialization.
In JavaScript:
$("#grid").igHierarchicalGrid({
initialDataBindDepth: -1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: 'RowSelectors',
enableCheckBoxes: true,
rowSelectorClicked: function(evt, ui) {
// Handle event
}
},
{
name: 'Selection'
}
]
});
When using Ignite UI for MVC, you can attach event handlers at runtime using the jQuery on() method.
In JavaScript:
$("#grid").on("iggridrowselectorsrowselectorclicked", function (e, args) {
// Handle event
}
);
This option is available when using Ignite UI for MVC as well, but Ignite UI for MVC also exposes another way with the AddClientEvent method. The first method argument accepts the string name of the event’s option and the second accepts the string name of the event handler function.
While this approach serves the majority of use cases, the second argument of the AddClientEvent method also accepts a string of JavaScript code to execute as well as a string representing the full JavaScript function as demonstrated in step 2 without the script element tags.
In ASPX:
<%= Html.Infragistics()
.Grid(Model)
.ID("grid")
.Features(features =>
{
features.RowSelectors().Inherit(true).AddClientEvent("rowSelectorClicked", "selectorClicked")
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
})
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
%>
This example demonstrates canceling the checkBoxStateChanging event. This resulted in a particular row, meeting the specific criteria, not being able to be selected or unselected.
In this example, code detects if the checkbox on the header row is checked. Handling the checkBoxStateChanging event, allows a checkbox selection to be canceled. In this way, you can prevent all of the rows being selected at once and force the user to select rows individually. Thus, preventing the user from selecting all the desired rows at once and force the user to select only specific rows one at a time.
In JavaScript:
$("#grid").igHierarchicalGrid({
initialDataBindDepth: -1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: 'RowSelectors',
enableCheckBoxes: true,
checkBoxStateChanging: function (evt, ui) {
if (ui.isHeader && ui.newState === "on")
return false;
}
},
{
name: 'Selection'
}
]
});
Refer to the following topics for additional information.
The following samples provide additional information related to this topic.
View on GitHub