$(() => {
const url = 'https://js.devexpress.com/Demos/Mvc/api/TreeListTasks';
$('#tree-list').dxTreeList({
dataSource: DevExpress.data.AspNet.createStore({
key: 'Task_ID',
loadUrl: `${url}/Tasks`,
insertUrl: `${url}/InsertTask`,
updateUrl: `${url}/UpdateTask`,
deleteUrl: `${url}/DeleteTask`,
onBeforeSend(method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
},
}),
remoteOperations: {
filtering: true,
sorting: true,
grouping: true,
},
parentIdExpr: 'Task_Parent_ID',
hasItemsExpr: 'Has_Items',
expandedRowKeys: [1, 2],
searchPanel: {
visible: true,
},
headerFilter: {
visible: true,
},
editing: {
mode: 'row',
allowAdding: true,
allowUpdating: true,
allowDeleting: true,
},
showRowLines: true,
showBorders: true,
columnAutoWidth: true,
wordWrapEnabled: true,
columns: [{
dataField: 'Task_Subject',
minWidth: 250,
validationRules: [{ type: 'required' }],
}, {
dataField: 'Task_Assigned_Employee_ID',
caption: 'Assigned',
minWidth: 120,
lookup: {
dataSource: DevExpress.data.AspNet.createStore({
key: 'ID',
loadUrl: `${url}/TaskEmployees`,
}),
valueExpr: 'ID',
displayExpr: 'Name',
},
validationRules: [{ type: 'required' }],
}, {
dataField: 'Task_Status',
caption: 'Status',
minWidth: 120,
lookup: {
dataSource: [
'Not Started',
'Need Assistance',
'In Progress',
'Deferred',
'Completed',
],
},
}, {
dataField: 'Task_Start_Date',
caption: 'Start Date',
dataType: 'date',
}, {
dataField: 'Task_Due_Date',
caption: 'Due Date',
dataType: 'date',
},
],
onInitNewRow(e) {
e.data.Task_Status = 'Not Started';
e.data.Task_Start_Date = new Date();
e.data.Task_Due_Date = new 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.1.7/css/dx.light.css" />
<script src="js/dx.all.js"></script>
<script src="https://unpkg.com/devextreme-aspnet-data@4.0.2/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="tree-list"></div>
</div>
</body>
</html>
#tree-list {
max-height: 640px;
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.TreeList;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Formatting;
using System.Web.Http;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
[Route("api/TreeListTasks/{action}", Name = "TreeListTasks")]
public class TreeListTasksController : ApiController {
InMemoryTasksDataContext db = new InMemoryTasksDataContext();
[HttpGet]
public HttpResponseMessage Tasks(DataSourceLoadOptions loadOptions) {
var tasks = from d in db.Tasks
select new Models.TreeList.EmployeeTask {
Task_ID = d.Task_ID,
Task_Parent_ID = d.Task_Parent_ID,
Task_Owner_ID = d.Task_Owner_ID,
Task_Assigned_Employee_ID = d.Task_Assigned_Employee_ID,
Task_Completion = d.Task_Completion,
Task_Priority = d.Task_Priority,
Task_Status = d.Task_Status,
Task_Subject = d.Task_Subject,
Task_Start_Date = d.Task_Start_Date,
Task_Due_Date = d.Task_Due_Date,
Has_Items = db.Tasks.Count(task => task.Task_Parent_ID == d.Task_ID) > 0
};
return Request.CreateResponse(DataSourceLoader.Load(tasks, loadOptions));
}
[HttpGet]
public HttpResponseMessage TasksWithEmployees(DataSourceLoadOptions loadOptions) {
var tasks = from d in db.Tasks
select new Models.TreeList.EmployeeTask {
Task_ID = d.Task_ID,
Task_Parent_ID = d.Task_Parent_ID,
Task_Owner_ID = d.Task_Owner_ID,
Task_Assigned_Employee_ID = d.Task_Assigned_Employee_ID,
Task_Assigned_Employee = db.TaskEmployees.Where(employee => employee.ID == d.Task_Assigned_Employee_ID).FirstOrDefault(),
Task_Completion = d.Task_Completion,
Task_Priority = d.Task_Priority,
Task_Status = d.Task_Status,
Task_Subject = d.Task_Subject,
Task_Start_Date = d.Task_Start_Date,
Task_Due_Date = d.Task_Due_Date
};
return Request.CreateResponse(DataSourceLoader.Load(tasks, loadOptions));
}
[HttpGet]
public HttpResponseMessage TaskEmployees(DataSourceLoadOptions loadOptions) {
return Request.CreateResponse(DataSourceLoader.Load(db.TaskEmployees, loadOptions));
}
[HttpPost]
public HttpResponseMessage InsertTask(FormDataCollection form) {
var values = form.Get("values");
var newItem = new Models.TreeList.EmployeeTask();
JsonConvert.PopulateObject(values, newItem);
Validate(newItem);
if(!ModelState.IsValid)
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage());
db.Tasks.Add(newItem);
db.SaveChanges();
return Request.CreateResponse(HttpStatusCode.Created);
}
[HttpPut]
public HttpResponseMessage UpdateTask(FormDataCollection form) {
var key = Convert.ToInt32(form.Get("key"));
var values = form.Get("values");
var employee = db.Tasks.First(e => e.Task_ID == key);
JsonConvert.PopulateObject(values, employee);
Validate(employee);
if(!ModelState.IsValid)
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage());
db.SaveChanges();
return Request.CreateResponse(HttpStatusCode.OK);
}
[HttpDelete]
public void DeleteTask(FormDataCollection form) {
var key = Convert.ToInt32(form.Get("key"));
var employee = db.Tasks.First(e => e.Task_ID == key);
db.Tasks.Remove(employee);
db.SaveChanges();
}
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.TreeList {
public class InMemoryTasksDataContext : InMemoryDataContext<EmployeeTask> {
public ICollection<EmployeeTask> Tasks => ItemsInternal;
public IEnumerable<TaskEmployee> TaskEmployees => SampleData.SampleData.TaskEmployees;
protected override IEnumerable<EmployeeTask> Source => SampleData.SampleData.EmployeeTasks;
protected override int GetKey(EmployeeTask item) => item.Task_ID;
protected override void SetKey(EmployeeTask item, int key) => item.Task_ID = key;
}
}
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using System;
using System.ComponentModel.DataAnnotations;
namespace DevExtreme.MVC.Demos.Models.TreeList {
[JsonConverter(typeof(StringEnumConverter))]
public enum Priority { Low, Normal, High, Urgent }
public class EmployeeTask {
public int Task_ID { set; get; }
public int Task_Parent_ID { set; get; }
[Required]
[Display(Name = "Assigned")]
public int Task_Assigned_Employee_ID { set; get; }
public TaskEmployee Task_Assigned_Employee { set; get; }
public int Task_Owner_ID { set; get; }
[Required]
[Display(Name = "Task Subject")]
public string Task_Subject { set; get; }
[Display(Name = "Start Date")]
public DateTime Task_Start_Date { set; get; }
[Display(Name = "Due Date")]
public DateTime Task_Due_Date { set; get; }
[Display(Name = "Status")]
public string Task_Status { set; get; }
public Priority Task_Priority { set; get; }
public int Task_Completion { set; get; }
public bool Has_Items { get; set; }
}
public class TaskEmployee {
public int ID { set; get; }
public string Name { set; get; }
public string Picture { set; get; }
}
}