Skip to main content

ASPxClientGridView.FocusedRowChanged Event

Fires when the row focus changes.

#Declaration

TypeScript
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:

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)

ASPxGridView-FocusedRow

<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>
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)

@Html.DevExpress().GridView(settings => {
    settings.Name = "grid";
    settings.KeyFieldName = "EmployeeID";
    ...
    settings.ClientSideEvents.FocusedRowChanged = "OnGridFocusedRowChanged";
}).Bind(Model).GetHtml()
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]);
}
See Also