Back to Devexpress

ASPxClientGridView.SelectionChanged Event

aspnet-js-aspxclientgridview-d8a55a87.md

latest4.6 KB
Original Source

ASPxClientGridView.SelectionChanged Event

Fires when the row selection changes.

Declaration

ts
SelectionChanged: ASPxClientEvent<ASPxClientGridViewSelectionEventHandler<ASPxClientGridView>>

Event Data

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

PropertyDescription
isAllRecordsOnPageGets whether all rows displayed within a page have been selected or unselected.
isChangedOnServerGets whether a selection has been changed on the server.
isSelectedGets whether the row has been selected.
processOnServerSpecifies whether or not to process the event on the server. Inherited from ASPxClientProcessingModeEventArgs.
visibleIndexGets 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:

Limitation

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>
javascript
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);
    }
}

See Also

ASPxClientGridView Class

ASPxClientGridView Members