Your search did not match any results.
Copy to CodePen
Apply
Reset
$(function() { var treeListData = $.map(tasks, function(task, _) { task.Task_Assigned_Employee = null; $.each(employees, function(_, 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, 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", minWidth: 250 }, { dataField: "Task_Assigned_Employee_ID", caption: "Assigned", allowSorting: false, minWidth: 200, cellTemplate: function(container, options) { var currentEmployee = options.data.Task_Assigned_Employee; if(currentEmployee) { $("<div>", { "class": "img", style: "background-image:url(" + currentEmployee.Picture + ");" }) .appendTo(container); $("<span>", { "class": "name", text: currentEmployee.Name }) .appendTo(container); } }, 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: function(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"> <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=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.2.3/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; }
var tasks = [{ "Task_ID": 1, "Task_Assigned_Employee_ID": 1, "Task_Subject": "Plans 2015", "Task_Start_Date": "2015-01-01T00:00:00", "Task_Due_Date": "2015-04-01T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 2, "Task_Assigned_Employee_ID": 2, "Task_Subject": "Health Insurance", "Task_Start_Date": "2015-02-12T00:00:00", "Task_Due_Date": "2015-05-30T00:00:00", "Task_Status": "In Progress", "Task_Priority": 4, "Task_Completion": 75, "Task_Parent_ID": 0 }, { "Task_ID": 3, "Task_Assigned_Employee_ID": 4, "Task_Subject": "New Brochures", "Task_Start_Date": "2015-02-17T00:00:00", "Task_Due_Date": "2015-03-01T00:00:00", "Task_Status": "Completed", "Task_Priority": 3, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 5, "Task_Assigned_Employee_ID": 5, "Task_Subject": "NDA", "Task_Start_Date": "2015-03-12T00:00:00", "Task_Due_Date": "2015-05-01T00:00:00", "Task_Status": "In Progress", "Task_Priority": 3, "Task_Completion": 90, "Task_Parent_ID": 0 }, { "Task_ID": 6, "Task_Assigned_Employee_ID": 7, "Task_Subject": "Revenue Projections", "Task_Start_Date": "2015-03-24T00:00:00", "Task_Due_Date": "2015-04-15T00:00:00", "Task_Status": "Completed", "Task_Priority": 3, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 7, "Task_Assigned_Employee_ID": 9, "Task_Subject": "TV Recall", "Task_Start_Date": "2015-04-18T00:00:00", "Task_Due_Date": "2016-02-04T00:00:00", "Task_Status": "In Progress", "Task_Priority": 4, "Task_Completion": 90, "Task_Parent_ID": 0 }, { "Task_ID": 8, "Task_Assigned_Employee_ID": 6, "Task_Subject": "Overtime", "Task_Start_Date": "2015-06-10T00:00:00", "Task_Due_Date": "2015-06-20T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 9, "Task_Assigned_Employee_ID": 8, "Task_Owner_ID": 12, "Task_Subject": "Recall and Refund Forms", "Task_Start_Date": "2015-06-17T00:00:00", "Task_Due_Date": "2016-04-09T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 10, "Task_Assigned_Employee_ID": 9, "Task_Subject": "Shippers", "Task_Start_Date": "2015-07-10T00:00:00", "Task_Due_Date": "2016-04-11T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 11, "Task_Assigned_Employee_ID": 6, "Task_Subject": "Hardware Upgrade", "Task_Start_Date": "2015-07-22T00:00:00", "Task_Due_Date": "2016-05-01T00:00:00", "Task_Status": "In Progress", "Task_Priority": 3, "Task_Completion": 95, "Task_Parent_ID": 0 }, { "Task_ID": 12, "Task_Assigned_Employee_ID": 6, "Task_Subject": "Touch-Enabled Apps", "Task_Start_Date": "2015-08-05T00:00:00", "Task_Due_Date": "2016-04-30T00:00:00", "Task_Status": "In Progress", "Task_Priority": 2, "Task_Completion": 90, "Task_Parent_ID": 0 }, { "Task_ID": 13, "Task_Assigned_Employee_ID": 6, "Task_Subject": "Online Sales", "Task_Start_Date": "2015-08-20T00:00:00", "Task_Due_Date": "2015-09-15T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 14, "Task_Assigned_Employee_ID": 6, "Task_Subject": "New Website Design", "Task_Start_Date": "2015-09-17T00:00:00", "Task_Due_Date": "2015-11-01T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 15, "Task_Assigned_Employee_ID": 6, "Task_Subject": "Bandwidth Increase", "Task_Start_Date": "2015-11-01T00:00:00", "Task_Due_Date": "2015-11-07T00:00:00", "Task_Status": "Completed", "Task_Priority": 3, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 16, "Task_Assigned_Employee_ID": null, "Task_Subject": "Support", "Task_Start_Date": "2015-11-10T00:00:00", "Task_Due_Date": "2015-11-15T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 17, "Task_Assigned_Employee_ID": 31, "Task_Subject": "Training Material", "Task_Start_Date": "2015-11-14T00:00:00", "Task_Due_Date": "2016-02-05T00:00:00", "Task_Status": "Completed", "Task_Priority": 3, "Task_Completion": 100, "Task_Parent_ID": 0 }, { "Task_ID": 20, "Task_Assigned_Employee_ID": 3, "Task_Subject": "Automation Server", "Task_Start_Date": "2016-01-15T00:00:00", "Task_Due_Date": "2016-04-30T00:00:00", "Task_Status": "In Progress", "Task_Priority": 3, "Task_Completion": 85, "Task_Parent_ID": 0 }, { "Task_ID": 22, "Task_Assigned_Employee_ID": 1, "Task_Subject": "Reports", "Task_Start_Date": "2016-03-13T00:00:00", "Task_Due_Date": "2016-05-07T00:00:00", "Task_Status": "In Progress", "Task_Priority": 4, "Task_Completion": 50, "Task_Parent_ID": 0 }, { "Task_ID": 23, "Task_Assigned_Employee_ID": 5, "Task_Subject": "Budget", "Task_Start_Date": "2016-03-20T00:00:00", "Task_Due_Date": "2016-04-01T00:00:00", "Task_Status": "In Progress", "Task_Priority": 4, "Task_Completion": 30, "Task_Parent_ID": 0 }, { "Task_ID": 27, "Task_Assigned_Employee_ID": 1, "Task_Subject": "Customer Follow Up Plan", "Task_Start_Date": "2016-05-05T00:00:00", "Task_Due_Date": "2016-05-11T00:00:00", "Task_Status": "In Progress", "Task_Priority": 2, "Task_Completion": 40, "Task_Parent_ID": 0 }, { "Task_ID": 28, "Task_Assigned_Employee_ID": 7, "Task_Subject": "Prepare 2015 Financial", "Task_Start_Date": "2015-01-15T00:00:00", "Task_Due_Date": "2015-01-31T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 1 }, { "Task_ID": 29, "Task_Assigned_Employee_ID": 4, "Task_Subject": "Prepare 2015 Marketing Plan", "Task_Start_Date": "2015-01-01T00:00:00", "Task_Due_Date": "2015-01-31T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 1 }, { "Task_ID": 30, "Task_Assigned_Employee_ID": 2, "Task_Subject": "Review Health Insurance Options Under the Affordable Care Act", "Task_Start_Date": "2015-02-12T00:00:00", "Task_Due_Date": "2015-04-25T00:00:00", "Task_Status": "In Progress", "Task_Priority": 4, "Task_Completion": 50, "Task_Parent_ID": 2 }, { "Task_ID": 31, "Task_Assigned_Employee_ID": 1, "Task_Subject": "Choose between PPO and HMO Health Plan", "Task_Start_Date": "2015-02-15T00:00:00", "Task_Due_Date": "2015-04-15T00:00:00", "Task_Status": "In Progress", "Task_Priority": 4, "Task_Completion": 75, "Task_Parent_ID": 2 }, { "Task_ID": 32, "Task_Assigned_Employee_ID": 1, "Task_Subject": "Google AdWords Strategy", "Task_Start_Date": "2015-02-16T00:00:00", "Task_Due_Date": "2015-02-28T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 29 }, { "Task_ID": 34, "Task_Assigned_Employee_ID": null, "Task_Subject": "2015 Brochure Designs", "Task_Start_Date": "2015-02-19T00:00:00", "Task_Due_Date": "2015-02-24T00:00:00", "Task_Status": "Completed", "Task_Priority": 3, "Task_Completion": 100, "Task_Parent_ID": 3 }, { "Task_ID": 35, "Task_Assigned_Employee_ID": null, "Task_Subject": "Brochure Design Review", "Task_Start_Date": "2015-02-19T00:00:00", "Task_Due_Date": "2015-02-22T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 34 }, { "Task_ID": 36, "Task_Assigned_Employee_ID": 29, "Task_Subject": "Website Re-Design Plan", "Task_Start_Date": "2015-02-19T00:00:00", "Task_Due_Date": "2015-02-24T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 34 }, { "Task_ID": 37, "Task_Assigned_Employee_ID": 4, "Task_Subject": "Rollout of New Website and Marketing Brochures", "Task_Start_Date": "2015-02-20T00:00:00", "Task_Due_Date": "2015-02-28T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 3 }, { "Task_ID": 38, "Task_Assigned_Employee_ID": 8, "Task_Subject": "Update Sales Strategy Documents", "Task_Start_Date": "2015-02-20T00:00:00", "Task_Due_Date": "2015-02-22T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 29 }, { "Task_ID": 39, "Task_Assigned_Employee_ID": null, "Task_Subject": "Create 2012 Sales Report", "Task_Start_Date": "2015-02-20T00:00:00", "Task_Due_Date": "2015-02-21T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 29 }, { "Task_ID": 40, "Task_Assigned_Employee_ID": null, "Task_Subject": "Direct vs Online Sales Comparison Report", "Task_Start_Date": "2015-02-20T00:00:00", "Task_Due_Date": "2015-02-22T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 29 }, { "Task_ID": 41, "Task_Assigned_Employee_ID": 4, "Task_Subject": "Review 2012 Sales Report and Approve 2015 Plans", "Task_Start_Date": "2015-02-23T00:00:00", "Task_Due_Date": "2015-02-28T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 29 }, { "Task_ID": 42, "Task_Assigned_Employee_ID": 3, "Task_Subject": "Deliver R&D Plans for 2015", "Task_Start_Date": "2015-03-01T00:00:00", "Task_Due_Date": "2015-03-10T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 1 }, { "Task_ID": 43, "Task_Assigned_Employee_ID": null, "Task_Subject": "Create 2015 R&D Plans", "Task_Start_Date": "2015-03-01T00:00:00", "Task_Due_Date": "2015-03-07T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 42 }, { "Task_ID": 44, "Task_Assigned_Employee_ID": null, "Task_Subject": "2015 QA Strategy Report", "Task_Start_Date": "2015-03-02T00:00:00", "Task_Due_Date": "2015-03-05T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 42 }, { "Task_ID": 46, "Task_Assigned_Employee_ID": 2, "Task_Subject": "Non-Compete Agreements", "Task_Start_Date": "2015-03-12T00:00:00", "Task_Due_Date": "2015-03-14T00:00:00", "Task_Status": "Completed", "Task_Priority": 1, "Task_Completion": 100, "Task_Parent_ID": 5 }, { "Task_ID": 47, "Task_Assigned_Employee_ID": 1, "Task_Subject": "Update NDA Agreement", "Task_Start_Date": "2015-03-14T00:00:00", "Task_Due_Date": "2015-03-16T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 5 }, { "Task_ID": 48, "Task_Assigned_Employee_ID": 5, "Task_Subject": "Update Employee Files with New NDA", "Task_Start_Date": "2015-03-16T00:00:00", "Task_Due_Date": "2015-03-26T00:00:00", "Task_Status": "Need Assistance", "Task_Priority": 2, "Task_Completion": 90, "Task_Parent_ID": 5 }, { "Task_ID": 49, "Task_Assigned_Employee_ID": 6, "Task_Subject": "Sign Updated NDA", "Task_Start_Date": "2015-03-20T00:00:00", "Task_Due_Date": "2015-03-25T00:00:00", "Task_Status": "Completed", "Task_Priority": 3, "Task_Completion": 100, "Task_Parent_ID": 5 }, { "Task_ID": 53, "Task_Assigned_Employee_ID": 7, "Task_Subject": "Submit Questions Regarding New NDA", "Task_Start_Date": "2015-03-21T00:00:00", "Task_Due_Date": "2015-03-24T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 5 }, { "Task_ID": 56, "Task_Assigned_Employee_ID": 8, "Task_Subject": "Submit Signed NDA", "Task_Start_Date": "2015-03-22T00:00:00", "Task_Due_Date": "2015-03-24T00:00:00", "Task_Status": "Completed", "Task_Priority": 3, "Task_Completion": 100, "Task_Parent_ID": 5 }, { "Task_ID": 60, "Task_Assigned_Employee_ID": 7, "Task_Subject": "Update Revenue Projections", "Task_Start_Date": "2015-03-24T00:00:00", "Task_Due_Date": "2015-04-07T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 6 }, { "Task_ID": 61, "Task_Assigned_Employee_ID": 8, "Task_Subject": "Review Revenue Projections", "Task_Start_Date": "2015-03-25T00:00:00", "Task_Due_Date": "2015-04-06T00:00:00", "Task_Status": "Completed", "Task_Priority": 4, "Task_Completion": 100, "Task_Parent_ID": 6 }, { "Task_ID": 62, "Task_Assigned_Employee_ID": null, "Task_Subject": "Comment on Revenue Projections", "Task_Start_Date": "2015-03-25T00:00:00", "Task_Due_Date": "2015-04-03T00:00:00", "Task_Status": "Completed", "Task_Priority": 3, "Task_Completion": 100, "Task_Parent_ID": 6 }, { "Task_ID": 65, "Task_Assigned_Employee_ID": 5, "Task_Subject": "Provide New Health Insurance Docs", "Task_Start_Date": "2015-03-28T00:00:00", "Task_Due_Date": "2015-04-07T00:00:00", "Task_Status": "Completed", "Task_Priority": 2, "Task_Completion": 100, "Task_Parent_ID": 2 }]; var employees = [{ "ID": 1, "Name": "John Heart", "Picture": "../../../../images/employees/01.png" }, { "ID": 2, "Name": "Samantha Bright", "Picture": "../../../../images/employees/04.png" }, { "ID": 3, "Name": "Arthur Miller", "Picture": "../../../../images/employees/02.png" }, { "ID": 4, "Name": "Robert Reagan", "Picture": "../../../../images/employees/03.png" }, { "ID": 5, "Name": "Greta Sims", "Picture": "../../../../images/employees/06.png" }, { "ID": 6, "Name": "Brett Wade", "Picture": "../../../../images/employees/05.png" }, { "ID": 7, "Name": "Sandra Johnson", "Picture": "../../../../images/employees/08.png" }, { "ID": 8, "Name": "Ed Holmes", "Picture": "../../../../images/employees/07.png" }, { "ID": 9, "Name": "Cindy Stanwick", "Picture": "../../../../images/employees/09.png" }]; var priorities = [ { id: 1, value: "Low" }, { id: 2, value: "Normal" }, { id: 3, value: "Urgent" }, { id: 4, value: "High" } ];