aspnet-3733-components-grid-view-concepts-focus-and-navigation-focused-row.md
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.
<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.
Call the SetFocusedRowIndex(visibleIndex) method to focus the row with the specified visible index within the current page.
<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>
function OnClick(s, e) {
grid.SetFocusedRowIndex(1);
}
Use the GetFocusedRowIndex method to get the index of the focused row.
Change the FocusedRowIndex property value to move focus to the row with the specified visible index within the current page.
<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>
function OnClick(s, e) {
grid.PerformCallback();
}
protected void ASPxGridView1_CustomCallback(object sender, DevExpress.Web.ASPxGridViewCustomCallbackEventArgs e) {
ASPxGridView1.FocusedRowIndex = 1;
}
Protected Sub ASPxGridView1_CustomCallback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxGridViewCustomCallbackEventArgs)
ASPxGridView1.FocusedRowIndex = 1
End Sub
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.
<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]);
}