ASPxClientGridView.FocusedRowChanged Event

Fires when the row focus changes.

Declaration

FocusedRowChanged: ASPxClientEvent<ASPxClientGridViewFocusEventHandler<ASPxClientGridView>>

Event Data

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

Property	Description
isChangedOnServer	Gets whether the row focusing has been changed on the server.
processOnServer	Specifies whether or not to process the event on the server. Inherited from ASPxClientProcessingModeEventArgs.

Remarks

The FocusedRowChanged event fires in the following cases:

• A user moves row focus.
• You change the FocusedRowIndex property value.
• You call the SetFocusedRowIndex(visibleIndex) method.

When the ProcessFocusedRowChangedOnServer property is set to true, the control raises the server ASPxGridView.FocusedRowChanged event.

When row focus is disabled, the FocusedRowChanged event does not fire.

Web Forms Example

The example below shows how to dynamically display a focused employee’s photo and details outside the grid.

Run Demo: ASPxGridView - Focused Row (Web Forms)

ASPX

<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" PreviewFieldName="Notes"
    KeyFieldName="EmployeeID" AutoGenerateColumns="False" EnableRowsCache="false">
    <Columns>
    <%--...--%>
    </Columns>
    <ClientSideEvents FocusedRowChanged="OnGridFocusedRowChanged" />
    <SettingsBehavior AllowFocusedRow="true" />
</dx:ASPxGridView>
<table style="width: 100%; height: 200px" class="OptionsTable TopMargin">
    <tr>
        <td style="width: 160px">
            <dx:ASPxImage runat="server" ID="DetailImage" ClientInstanceName="DetailImage"
                ClientVisible="false" Width="160px" />
        </td>
        <td class="LeftPadding">
            <dx:ASPxMemo runat="server" ID="DetailNotes" ClientInstanceName="DetailNotes"
                Width="100%" Height="170" ReadOnly="true" />
        </td>
    </tr>
</table>

JS

function OnGridFocusedRowChanged(s, e) {
    // Gets the focused row's "EmployeeID" and "Notes" field values.
    // The OnGetRowValues() function returns these values.
    DetailNotes.SetText("Loading...");
    grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
}

function OnGetRowValues(values) {
    DetailImage.SetImageUrl("FocusedRow.aspx?Photo=" + values[0]);
    DetailImage.SetVisible(true);
    DetailNotes.SetText(values[1]);
}

MVC Example

Run Demo: Grid View - focused Row (MVC)

Razor (View)

@Html.DevExpress().GridView(settings => {
    settings.Name = "grid";
    settings.KeyFieldName = "EmployeeID";
    ...
    settings.ClientSideEvents.FocusedRowChanged = "OnGridFocusedRowChanged";
}).Bind(Model).GetHtml()

JS

function OnGridFocusedRowChanged(s, e) {
    s.GetRowValues(s.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
}
function OnGetRowValues(values) {
    DetailPhoto.SetImageUrl("@GridViewRowsDemosHelper.GetEmployeeImageRouteUrl()?@GridViewRowsDemosHelper.ImageQueryKey=" + values[0]);
    DetailNotes.SetText(values[1]);
}