Focused Row

• Feb 02, 2023
• 3 minutes to read

The ASP.NET MVC GridView extension provides the Focused Row feature. This feature is disabled by default. To enable it, set the ASPxGridViewBehaviorSettings.AllowFocusedRow (via GridViewSettings.SettingsBehavior.AllowFocusedRow) option to true.

The style settings used to paint the focused data row can be accessed and customized using the GridViewStyles.FocusedRow (via GridViewSettings.Styles.FocusedRow) property. The focused group row’s appearance can be customized using the GridViewStyles.FocusedGroupRow (via GridViewSettings.Styles.FocusedGroupRow) property.

Moving Focus on the Server Side

On the server side, you can identify a focused row using the ASPxGridView.FocusedRowIndex (via MVCxGridView.FocusedRowIndex) property. You can use this property to move row focus within the entire grid. Note that the grid will automatically open the required page and focus the required row.

View code:

Razor

@Html.DevExpress().GridView(settings => {
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
    settings.SettingsPager.PageSize = 5;

    settings.KeyFieldName = "EmployeeID";
    settings.Columns.Add("LastName");
    settings.Columns.Add("FirstName");
    settings.Columns.Add("City");
    settings.Columns.Add("Country");

    settings.PreRender = (s, e) =>
    {
        var sender = (MVCxGridView)s;
        // Set the zero-based index of the focused row.
        sender.FocusedRowIndex = 6;
    };
    // Enable row focus.
    settings.SettingsBehavior.AllowFocusedRow = true;
}).Bind(Model).GetHtml()

Moving Focus on the Client Side

End-users can move row focus by clicking rows. To identify the currently focused row, use the clientASPxClientGridView.GetFocusedRowIndex (via MVCxClientGridView.GetFocusedRowIndex) method. To change row focus, use the client ASPxClientGridView.SetFocusedRowIndex (via MVCxClientGridView.SetFocusedRowIndex) method.

To respond to row focus changes, handle the ASPxClientGridView.FocusedRowChanged (via MVCxClientGridView.FocusedRowChanged) client event.

Note

You can only focus a row that is currently visible on screen. If you wish to focus rows that are not visible (using a client API), you should enable row focus processing on the server side. To do this, handle the ASPxClientGridView.FocusedRowChanged (via MVCxClientGridView.FocusedRowChanged) client event and set the ASPxClientProcessingModeEventArgs.processOnServer property value to true, as shown in the example below.

In this case, the GridView extension will automatically open the required page and focus the required row.

Example

The example below demonstrates how to focus rows on the client side using the client-side API.

View code:

Razor

<script type="text/javascript">
    function onButtonClick() {
        // When an end-user clicks the button, a row with the specified index gets focus. 
        GridView.SetFocusedRowIndex(8);
        // Available methods: 
        // GridView.GetFocusedRowIndex() - gets the index of the currently focused row. 
    }
</script>

@Html.Action("GridViewPartial")

@Html.DevExpress().Button(settings =>
{
    settings.Name = "btnFocuseRow";
    settings.UseSubmitBehavior = false;
    settings.Text = "Focus";
    settings.ClientSideEvents.Click = "onButtonClick";
}).GetHtml()

Partial View code:

Razor

@Html.DevExpress().GridView(settings => {
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
    settings.SettingsPager.PageSize = 5;

    settings.KeyFieldName = "EmployeeID";
    settings.Columns.Add("FirstName");
    settings.Columns.Add("LastName");
    settings.Columns.Add("Title");
    settings.Columns.Add("City");
    settings.Columns.Add("Country");

    settings.SettingsBehavior.AllowFocusedRow = true;
    // Allow callbacks to the server when moving row focus using the client-side API.
    settings.ClientSideEvents.FocusedRowChanged = "function (s, e) {e.processOnServer = true;}";
}).Bind(Model).GetHtml()