Keyboard Navigation

• Aug 29, 2023
• 3 minutes to read

You can use a keyboard instead of a pointing device to perform primary navigation operations (for example, access a grid within a form, move focus through grid rows, select a row, expand/collapse a row, paging). In addition, when you enable keyboard support within ASPxGridView, it allows you to create web pages that conform to accessibility guidelines.

Run Demo: Accessibility - Keyboard Support

Set the grid’s KeyboardSupport property to true to enable keyboard navigation. This activates the following grid features:

Access Key

A user can press the defined keyboard shortcut to access (focus) the grid control. To compose this shortcut, hold Ctrl+Shift and press a single character string specified by the AccessKey property. For example, if you specify “G” as the grid control’s access key, users can navigate to the grid with the Ctrl+Shift+G key combination.

Focused Row

The Focused Row feature is automatically activated, regardless of its corresponding property setting (AllowFocusedRow). To move focus between rows, use the Up and Down arrow keys. You can also use the Left and Right arrow keys to move row focus, but these keys try to initially collapse/expand a row and move focus only if the row cannot be collapsed or expanded. The control changes the page when a user moves focus backward from the first visible row or forward from the last visible row (except for the start and end pages).

Row Selection

Use the Space key to mark a focused row as selected or unselected. This works if a row can be selected - that is, if it is not a group or detail row, the AllowMultiSelection property is enabled, or the row contains a command button, selection check box, or radio button. To select multiple rows, use the Arrow keys (Up/Down or Left/Right) to move row focus while holding the Shift key.

Expanding/Collapsing Rows

You can use the Plus and Minus keys to expand and collapse group and detail rows. To collapse and expand rows, use the Left and Right arrow keys, respectively.

Paging

Use the Shift+Page Up and Shift+Page Down key combinations to go to the next/previous grid page.

Example: How to implement extended keyboard functionality

THe following code sample demonstrates how to implement extended keyboard functionality for ASPxGridView. Use the following keys for the CRUD operations:

• F2 - Edit the selected row;
• F3 - Insert a new row;
• Delete - Delete the selected row;
• Enter - Close Edit Form and save changes;
• Esc- Close Edit Form without saving.

function OnInit(s, e) {
    ASPxClientUtils.AttachEventToElement(s.GetMainElement(),"keydown",
        function (evt) {
            switch (evt.keyCode) {
                //F2            
                case 113:
                    var key = s.GetFocusedRowIndex();
                    s.StartEditRow(key);
                    break;

                //Delete        
                case 46:
                    var key = s.GetFocusedRowIndex();
                    s.DeleteRow(key);
                    break;

                //F3       
                case 114:
                    var key = s.GetFocusedRowIndex();
                    s.AddNewRow(key);
                    break;

                //ENTER           
                case 13:
                    if (s.IsEditing()) {
                        s.UpdateEdit();
                    }
                    break;

                //ESC            
                case 27:
                    if (s.IsEditing()) {
                        s.CancelEdit();
                    }
                    break;
            }
        }
    );
}

<dx:ASPxGridView ID="gridView" runat="server" AutoGenerateColumns="False" DataSourceID="ads"
    KeyFieldName="CategoryID" ClientInstanceName="gridView" KeyboardSupport="True" AccessKey="T">
    <SettingsBehavior AllowFocusedRow="true" ConfirmDelete="true" />
    <ClientSideEvents Init="OnInit" />
    <Columns>
        <dx:GridViewCommandColumn ShowEditButton="True" ShowNewButton="True" ShowDeleteButton="True"/>
        <dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" >
            <EditFormSettings Visible="False" />
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="CategoryName" /
        <dx:GridViewDataTextColumn FieldName="Description" />
    </Columns>
</dx:ASPxGridView>