To see all available keyboard shortcuts, refer to the TreeList accessibility documentation: Keyboard Navigation.
In this demo, you can use the following keys and key combinations to interact with the TreeList:
Enter
Execute an action on a focused element.
Tab
Navigate within TreeList elements.
Ctrl + ↑ or Ctrl + ↓
Navigate between a column header, filter row, data area, filter panel, and pager.
Ctrl + ← or Ctrl + →
Expand/collapse the focused row.
Click this text and press Tab
<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).DeleteAction(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();
}
}
}