Keyboard Navigation

Documentation

In this demo, you can use the following keys and key combinations to interact with the widget:

Tab Navigate between TreeList elements.
Ctrl + ↑ or Ctrl + ↓ Navigate between header, filter panel, filter row, data area, and pager.
Enter or Space Execute an action on a focused element.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

ASP.NET MVC

<div id="tree-list-demo"> <p>Click this text and press <b>Tab</b></p> @(Html.DevExtreme().TreeList<DevExtreme.MVC.Demos.Models.TreeList.Employee>() .ID("treeListContainer") .KeyExpr("ID") .ParentIdExpr("HeadID") .ShowBorders(true) .ExpandedRowKeys(new JS("[1, 2, 3, 5]")) .Editing(editing => { editing.AllowUpdating(true); editing.AllowDeleting(true); editing.SelectTextOnEditStart(true); editing.UseIcons(true); }) .HeaderFilter(headerFilter => headerFilter.Visible(true)) .FilterPanel(filterPanel => filterPanel.Visible(true)) .FilterRow(filterRow => filterRow.Visible(true)) .Paging(paging => { paging.Enabled(true); paging.PageSize(10); }) .Scrolling(s => s.Mode(TreeListScrollingMode.Standard)) .Pager(pager => { pager.Visible(true); pager.AllowedPageSizes(new[] { 5, 10 }); pager.ShowPageSizeSelector(true); pager.ShowNavigationButtons(true); }) .FocusedRowEnabled(true) .Columns(columns => { columns.AddFor(m => m.FullName); columns.AddFor(m => m.Title); columns.AddFor(m => m.City); columns.AddFor(m => m.State); }) .DataSource(d => d.WebApi().Controller("TreeListEmployees").UpdateAction(true).Key("ID")) ) </div>

using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class TreeListController : Controller { public ActionResult KeyboardNavigation() { return View(); } } }

Keyboard Navigation

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC