$(function(){
var url = "https://js.devexpress.com/Demos/Mvc/api/TreeListTasks",
treeList,
taskEmployees = DevExpress.data.AspNet.createStore({
key: "ID",
loadMode: "raw",
loadUrl: url + "/TaskEmployees"
});
treeList = $("#treeList").dxTreeList({
dataSource: DevExpress.data.AspNet.createStore({
key: "Task_ID",
loadUrl: url + "/Tasks",
onBeforeSend: function(_, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
}
}),
remoteOperations: {
filtering: true,
sorting: true,
grouping: true
},
parentIdExpr: "Task_Parent_ID",
hasItemsExpr: "Has_Items",
focusedRowEnabled: true,
focusedRowKey: 4,
showBorders: true,
wordWrapEnabled: true,
columns: [
{
dataField: "Task_ID",
width: 100,
alignment: "left"
},
{
dataField: "Task_Assigned_Employee_ID",
caption: "Assigned",
minWidth: 120,
lookup: {
dataSource: taskEmployees,
valueExpr: "ID",
displayExpr: "Name"
}
},
{
dataField: "Task_Status",
caption: "Status",
width: 160,
},
{
dataField: "Task_Start_Date",
caption: "Start Date",
dataType: "date",
width: 160
},
{
dataField: "Task_Due_Date",
caption: "Due Date",
dataType: "date",
width: 160
}
],
onFocusedRowChanged: function(e) {
var rowData = e.row && e.row.data,
cellValue,
assigned;
if (rowData) {
cellValue = e.component.cellValue(e.row.rowIndex, "Assigned");
taskEmployees.byKey(cellValue).done(function(item) {
assigned = item.Name;
});
$(".task-subject").html(rowData.Task_Subject);
$(".task-assigned").html(assigned);
$(".start-date").html(new Date(rowData.Task_Start_Date).toLocaleDateString());
$(".task-status").html(rowData.Task_Status);
var progress = rowData.Task_Completion ? rowData.Task_Completion + "%" : "";
$(".task-progress").text(progress);
}
$("#taskId").dxNumberBox("instance").option("value", treeList.option("focusedRowKey"));
}
}).dxTreeList("instance");
$("#taskId").dxNumberBox({
min: 1,
max: 182,
step: 0,
onValueChanged: function(e) {
if(e.event && e.value > 0) {
treeList.option("focusedRowKey", e.value);
}
}
});
});
<!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="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/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<script src="https://unpkg.com/devextreme-aspnet-data@2.7.1/js/dx.aspnet.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="treeList"></div>
<div class="task-info">
<div class="info">
<div class="task-subject"></div>
<span class="task-assigned"></span>
<span class="start-date"></span>
</div>
<div class="progress">
<span class="task-status"></span>
<span class="task-progress"></span>
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Focused row key</span>
<div id="taskId"></div>
</div>
</div>
</div>
</body>
</html>
#treeList {
max-height: 400px;
}
.task-info {
font-family: Segoe UI;
min-height: 100px;
display: flex;
flex-wrap: nowrap;
border: 2px solid rgba(0, 0, 0, 0.1);
padding: 16px;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
}
.info {
display: flex;
flex-direction: column;
}
.task-subject {
line-height: 29px;
font-size: 18px;
font-weight: bold;
}
.progress {
display: flex;
flex-direction: column;
white-space: pre;
min-width: 105px;
}
.task-progress {
line-height: 42px;
font-size: 40px;
font-weight: bold;
}
.options {
margin-top: 20px;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: relative;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.option > .dx-numberbox {
width: 200px;
display: inline-block;
vertical-align: middle;
}
.option > span {
margin-right: 10px;
}