JavaScript/jQuery Tree List - Overview

DevExtreme JavaScript JavaScript TreeList control is a cross-breed of a tree view and data grid. This control is available as a jQuery plugin and can be bound to data from local arrays, JSON files, Web API and OData services, or custom remote services. This demo shows a slightly customized JavaScript TreeList with selection, filtering, and column rearranging enabled. Move to other demos to explore more JavaScript TreeList features, like sorting, data editing, adaptability, etc.

To get started with the DevExtreme JavaScript TreeList component, refer to the following tutorial for step-by-step instructions: Getting Started with JavaScript TreeList.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the TreeList features used.

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.

Thank you for the feedback!

Backend API

$(() => { const treeListData = $.map(tasks, (task) => { task.Task_Assigned_Employee = null; $.each(employees, (_, employee) => { if (employee.ID === task.Task_Assigned_Employee_ID) { task.Task_Assigned_Employee = employee; } }); return task; }); $('#tasks').dxTreeList({ dataSource: treeListData, keyExpr: 'Task_ID', parentIdExpr: 'Task_Parent_ID', columnAutoWidth: true, wordWrapEnabled: true, showBorders: true, expandedRowKeys: [1, 2], selectedRowKeys: [1, 29, 42], searchPanel: { visible: true, width: 250, }, headerFilter: { visible: true, }, selection: { mode: 'multiple', }, columnChooser: { enabled: true, }, columns: [{ dataField: 'Task_Subject', width: 300, }, { dataField: 'Task_Assigned_Employee_ID', caption: 'Assigned', allowSorting: false, minWidth: 200, cellTemplate(container, options) { const currentEmployee = options.data.Task_Assigned_Employee; if (currentEmployee) { container .append($('<div>', { class: 'img', style: `background-image:url(${currentEmployee.Picture});` })) .append('\n') .append($('<span>', { class: 'name', text: currentEmployee.Name })); } }, lookup: { dataSource: employees, valueExpr: 'ID', displayExpr: 'Name', }, }, { dataField: 'Task_Status', caption: 'Status', minWidth: 100, lookup: { dataSource: [ 'Not Started', 'Need Assistance', 'In Progress', 'Deferred', 'Completed', ], }, }, { dataField: 'Task_Priority', caption: 'Priority', lookup: { dataSource: priorities, valueExpr: 'id', displayExpr: 'value', }, visible: false, }, { dataField: 'Task_Completion', caption: '% Completed', customizeText(cellInfo) { return `${cellInfo.valueText}%`; }, visible: false, }, { dataField: 'Task_Start_Date', caption: 'Start Date', dataType: 'date', }, { dataField: 'Task_Due_Date', caption: 'Due Date', dataType: 'date', }], }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="tasks"></div> </div> </body> </html>

#tasks { max-height: 540px; } #tasks .dx-treelist-rowsview td { vertical-align: middle; } .img, .name { display: inline-block; vertical-align: middle; } .img { height: 50px; width: 50px; margin-right: 10px; background-position: center; background-repeat: no-repeat; background-size: contain; border-radius: 25px; border: 1px solid lightgray; background-color: #fff; }