ASPxClientGridView.GetFocusedRowIndex Method

Returns the index of the focused row.

Declaration

GetFocusedRowIndex(): number

Returns

Type	Description
number	The index of the focused row.

Remarks

Set the AllowFocusedRow property to true to enable row focus.

The GetFocusedRowIndex method returns -1 in the following cases:

• The row focus is disabled (the AllowFocusedRow property is set to false).
• A new row is created in Batch Edit mode.

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