Keyboard Navigation

With the keyboard navigation enabled in the Splitter component, it is possible to control the actions of the Splitter with the provided shortcut keys. Almost all the Splitter actions that are done by mouse can be controlled with shortcut keys.

The various keyboard shortcuts available within the Splitter component are discussed in the following table.

Keyboard Shortcuts:

Shortcut Key Description
Left Moves the Split bar left.
Right Moves the Split bar right.
Ctrl + Left Collapses the left pane.
Ctrl + Right Collapses the right pane.
Up Moves the Split bar up.
Down Moves the Split bar down.
Ctrl + Up Collapses the top pane.
Ctrl + Down Collapses the bottom pane.
Enter Resize the pane to the current Split bar position.
Esc Focuses out from the Split bar.

Configuring Keyboard Navigation

The following steps explain to enable keyboard interaction for Splitter component.

In the HTML page set the corresponding <div> element for rendering Splitter component.

  • html
  • <ej-splitter id="splitter" class="ang-splitter" height ="100%" width="485">		
            <div>
                <div style="padding: 0px 15px;">
                    <h3 class="h3">Tools </h3>
                    Essential Tools is an collection of user interface components used to create interactive
                    ASP.NET MVC applications.
                </div>
            </div>
            <div>
                <div style="padding: 0px 15px;">
                    <h3 class="h3">Grid </h3>
                    Essential MVC Grid offers full featured a Grid control with extensive support for
                    Grouping and the display of hierarchical data.
                </div>
            </div>
        </ej-splitter>

    To control the focus key by using keyCode of “altKey” and “j” key in document key down function. Declare the keydown function in script section.

  • javascript
  • export class AppComponent {
            cssClass:any;   
            constructor() {
            }
            $(document).on("keydown", function (e) {
                if (e.altKey && e.keyCode === 74) { // j- key code.
                    $("#splitter .e-splitbar")[0].focus();
                }
            });
        }

    Run the sample and press Alt + J to focus the Splitter component. Perform provided functionality by using keyboard shortcuts.

    Keyboard Navigations