Focused Row

• Dec 08, 2023
• 2 minutes to read

ASPxGridView supports row focus in the UI or in code on the client or server side.

Run Demo: ASPxGridView - Focused Row

Set the AllowFocusedRow property to true to enable row focus.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server">
    <SettingsBehavior AllowFocusedRow="true" />
    <%--...--%>
</dx:ASPxGridView>

The control allows a user to focus only one row at a time within the current page. If you navigate to another page, the row loses focus. To select multiple rows within different pages, use row selection.

Focus a Row on the Client Side

Call the SetFocusedRowIndex(visibleIndex) method to focus the row with the specified visible index within the current page.

ASPX

<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server">
    <SettingsBehavior AllowFocusedRow="true" />
    <%--...--%>
</dx:ASPxGridView>
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Focus the second row">
    <ClientSideEvents Click="OnClick" />
</dx:ASPxButton>

JS

function OnClick(s, e) {
    grid.SetFocusedRowIndex(1);
}

Use the GetFocusedRowIndex method to get the index of the focused row.

Focus a Row on the Server Side

Change the FocusedRowIndex property value to move focus to the row with the specified visible index within the current page.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" ClientInstanceName="grid" runat="server"
    AutoGenerateColumns="False" OnCustomCallback="ASPxGridView1_CustomCallback" KeyFieldName="CustomerID">
    <SettingsBehavior AllowFocusedRow="true" />
    <%--...--%>
</dx:ASPxGridView>
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Focus the second row" AutoPostBack="false">
    <ClientSideEvents Click="OnClick" />
</dx:ASPxButton>

JS

function OnClick(s, e) {
    grid.PerformCallback();
}

C#

protected void ASPxGridView1_CustomCallback(object sender, DevExpress.Web.ASPxGridViewCustomCallbackEventArgs e) {
    ASPxGridView1.FocusedRowIndex = 1;
}

VB.NET

Protected Sub ASPxGridView1_CustomCallback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxGridViewCustomCallbackEventArgs)
    ASPxGridView1.FocusedRowIndex = 1
End Sub

The FocusedRowChanged Event

When focus changes, the control raises the server-side ASPxGridView.FocusedRowChanged event or the client-side ASPxClientGridView.FocusedRowChanged event (based on the ProcessFocusedRowChangedOnServer property value).

In the client-side FocusedRowChanged event handler, set the processOnServer property to true to allow the grid to raise the server-side FocusedRowChanged event after the client-side event fires.

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

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

Limitation

• When cell merge is enabled, ASPxGridView does not support row focus.