Backend API
<template>
<div>
<DxTreeList
id="tree-list"
:data-source="tasksData"
:expanded-row-keys="[1, 2]"
:show-row-lines="true"
:show-borders="true"
:column-auto-width="true"
:word-wrap-enabled="true"
key-expr="Task_ID"
parent-id-expr="Task_Parent_ID"
has-items-expr="Has_Items"
@initNewRow="initNewRow($event)"
>
<DxRemoteOperations
:filtering="true"
:sorting="true"
:grouping="true"
/>
<DxSearchPanel :visible="true"/>
<DxHeaderFilter :visible="true"/>
<DxEditing
:allow-adding="true"
:allow-updating="true"
:allow-deleting="true"
mode="row"
/>
<DxColumn
:min-width="250"
data-field="Task_Subject"
>
<DxRequiredRule/>
</DxColumn>
<DxColumn
:min-width="120"
data-field="Task_Assigned_Employee_ID"
caption="Assigned"
>
<DxLookup
:data-source="employeesData"
value-expr="ID"
display-expr="Name"
/>
<DxRequiredRule/>
</DxColumn>
<DxColumn
:min-width="120"
data-field="Task_Status"
caption="Status"
>
<DxLookup :data-source="statusesData"/>
</DxColumn>
<DxColumn
data-field="Task_Start_Date"
caption="Start Date"
data-type="date"
/>
<DxColumn
data-field="Task_Due_Date"
caption="Due Date"
data-type="date"
/>
</DxTreeList>
</div>
</template>
<script setup lang="ts">
import {
DxTreeList,
DxRemoteOperations,
DxColumn,
DxSearchPanel,
DxHeaderFilter,
DxEditing,
DxRequiredRule,
DxLookup,
type DxTreeListTypes,
} from 'devextreme-vue/tree-list';
import { createStore } from 'devextreme-aspnet-data-nojquery';
const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks';
const tasksData = createStore({
key: 'Task_ID',
loadUrl: `${url}/Tasks`,
insertUrl: `${url}/InsertTask`,
updateUrl: `${url}/UpdateTask`,
deleteUrl: `${url}/DeleteTask`,
onBeforeSend(method, ajaxOptions) {
ajaxOptions.xhrFields = { withCredentials: true };
},
});
const employeesData = createStore({
key: 'ID',
loadUrl: `${url}/TaskEmployees`,
});
const statusesData = [
'Not Started',
'Need Assistance',
'In Progress',
'Deferred',
'Completed',
];
function initNewRow({ data }: DxTreeListTypes.InitNewRowEvent) {
data.Task_Status = 'Not Started';
data.Task_Start_Date = new Date();
data.Task_Due_Date = new Date();
}
</script>
<style>
#tree-list {
max-height: 640px;
}
</style>
import { createApp } from 'vue';
import App from './App.vue';
import 'anti-forgery';
createApp(App).mount('#app');
<!DOCTYPE html>
<html 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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
<script src="bundles/vendor/vue.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
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 System;
using System.ComponentModel.DataAnnotations;
using System.Text.Json.Serialization;
namespace DevExtreme.MVC.Demos.Models.TreeList {
[JsonConverter(typeof(JsonStringEnumConverter))]
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 Template Kit scaffolds an OData v4 Web API Service (.NET 8+) 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 Template Kit (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+ or JetBrains Rider.
Read Tutorial | View Examples: JavaScript (DevExtreme) & JavaScript (Svelte) | Watch Videos