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!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
$(() => {
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; }
}
}
A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
If you target .NET for your backend API, be sure to check out Web API Service and register your free copy today. The Solution Wizard scaffolds an OData v4 Web API Service (.NET 6+) with integrated authorization & CRUD operations powered by EF Core ORM. You can use OAuth2, JWT or custom authentication strategies alongside tools like Postman or Swagger (OpenAPI) for API testing. The built-in Web API Service also filters out secured server data based on permissions granted to users. Advanced/enterprise functions include audit trail, endpoints to download reports, file attachments, check validation, obtain localized captions, etc.
To use the free Solution Wizard (which creates the Web API Service), run the Universal Component Installer from the DevExpress Download Manager and use our predefined template in Visual Studio 2022+.
Read Tutorial | View Examples: JavaScript (DevExtreme) & JavaScript (Svelte) | Watch Videos