Keyboard Navigation

7 Apr 20173 minutes to read

With the keyboard navigation enabled in the Splitter control, 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 control 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.

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

In the View page add Splitter helper to render the control.

CSHTML

<ej-splitter id="outterSplitter" height="250" width="100%">
    <e-split-panes>
        <e-split-pane min-size="100">
            <e-content-template>

                <div>

                    <div style="padding: 0px 15px;">

                        <h3 class="h3">Tools </h3>

                        Essential Tools is a collection of user interface components used to create interactive ASP.NET MVC applications.

                    </div>

                </div>
            </e-content-template>
        </e-split-pane>
        <e-split-pane>
            <e-content-Template>
                <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>
            </e-content-Template>
        </e-split-pane>
    </e-split-panes>
</ej-splitter>


<script type="text/javascript">
	//Control focus key
	$(document).on("keydown", function (e) {
	if (e.altKey && e.keyCode === 74) { // j- key code.
	$("#Splitter .e-splitbar")[0].focus();
	}
	});
</script>

Run the sample and press Alt + J to focus the Splitter widget. We can fully utilize the functionality of the splitter control by using keyboard shortcuts.

Configuring Keyboard Navigation