# Header Focusability

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



FlexGrid provides a way to access the column headers using the keyboard keys. It gives you the ability to use keyboard arrow keys to move up into or over row and column headers. FlexGrid provides the [HeadersFocusability](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGridBase-1.HeadersFocusability.html) property that determines whether the row and column headers are focusable. To do so, it uses the [HeadersFocusability](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.Grid.HeadersFocusability.html) enumeration which specifies the following constants that define the focusability of row and column headers.

*   None - No header cells are focusable.
*   Column - Only column header cells are focusable.
*   Row - Only row header cells are focusable.
*   All - Both column and row header cells are focusable.

Additionally, once the column headers have focus, the Enter key can be used to trigger a click, performing a sort operation when sorting is enabled on the column.

**![Focusable rows and columns in FlexGrid](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgrid-columnfocusability.gif)**

The following code showcases how to use HeadersFocusability property which enables you to select the column header and perform sorting on FlexGrid by just using keyboard keys.

**Controller Code**

```csharp
public ActionResult Index(FormCollection collection)
{
    IValueProvider data = collection;
    var model = Sale.GetData(15);
    return View(model);
}
```

**View Code**

```razor
@using C1.Web.Mvc.Grid
@using ApplicationName.Models
@model IEnumerable<Sale>
@(Html.C1().FlexGrid<Sale>()
           .Id("ovFlexGrid")
           .AutoGenerateColumns(true)
           .CssClass("grid")
           .IsReadOnly(true)
           .Bind(bl => bl.Bind(Model))
           .HeadersFocusability(HeadersFocusability.Column)
           .Width("900px"))
```