ASPxClientGridView.SelectionChanged Event

Fires when the row selection changes.

Declaration

SelectionChanged: ASPxClientEvent<ASPxClientGridViewSelectionEventHandler<ASPxClientGridView>>

Event Data

The SelectionChanged event's data class is ASPxClientGridViewSelectionEventArgs. The following properties provide information specific to this event:

Property	Description
isAllRecordsOnPage	Gets whether all rows displayed within a page have been selected or unselected.
isChangedOnServer	Gets whether a selection has been changed on the server.
isSelected	Gets whether the row has been selected.
processOnServer	Specifies whether or not to process the event on the server. Inherited from ASPxClientProcessingModeEventArgs.
visibleIndex	Gets the visible index of the row whose selected state has been changed.

Remarks

The SelectionChanged event fires when the row selection changes by user interaction or in code.

The event parameter’s processOnServer property specifies whether to finally process the event on the server and fire the ASPxGridBase.SelectionChanged event or completely handle the SelectionChanged event on the client-side.

When the row selection changes on the server, you cannot identify the changes on the client-side and the control behaves as follows:

• The isChangedOnServer property returns true.

• The isAllRecordsOnPage, isSelected, and visibleIndex properties are not in effect.

Limitation

• When the ProcessSelectionChangedOnServer property is set to true, the control does not raise the client-side SelectionChanged event and raises the server-side ASPxGridBase.SelectionChanged event instead.

Example

In the example below, the control raises the client-side SelectionChanged event to obtain contact names from selected rows and display them within the list box.

Run Demo: ASPxGridView - Using Checkboxes

ASPX

<dx:ASPxListBox ID="ASPxListBox1" ClientInstanceName="selList" runat="server"
    AutoGenerateColumns="false"/>
<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" KeyFieldName="CustomerID">
    <Columns>
        <dx:GridViewCommandColumn ShowSelectCheckbox="true" />
        <dx:GridViewDataColumn FieldName="ContactName" />
        <%--...--%>
    </Columns>
    <ClientSideEvents SelectionChanged="grid_SelectionChanged" />
</dx:ASPxGridView>

JS

function grid_SelectionChanged(s,e) {
    s.GetSelectedFieldValues("ContactName",GetSelectedFieldValuesCallback);
}
function GetSelectedFieldValuesCallback(values) {
    selList.BeginUpdate();
    try {
        selList.ClearItems();
        for(var i=0;i<values.length;i++) {
            selList.AddItem(values[i]);
        }
    } finally {
        selList.EndUpdate();
    }
    document.getElementById("selCount").innerHTML=grid.GetSelectedRowCount();
}

The event’s isSelected parameter specifies whether the row is selected. To determine the selected row’s keyValue, use the GetRowKey(visibleIndex) method.

JS

function OnSelectionChanged(s, e) {
    if (e.isSelected) {
        var key = s.GetRowKey(e.visibleIndex);
        alert('Key = ' + key);
    }
}