Angular Tree List - Web API Service

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import * as AspNetData from 'devextreme-aspnet-data-nojquery'; import { DxTreeListModule, DxTreeListTypes } from 'devextreme-angular/ui/tree-list'; import 'anti-forgery'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxTreeListModule, ], }) export class AppComponent { tasksData: AspNetData.CustomStore; employeesData: AspNetData.CustomStore; statusesData = [ 'Not Started', 'Need Assistance', 'In Progress', 'Deferred', 'Completed', ]; constructor() { const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks'; this.tasksData = AspNetData.createStore({ key: 'Task_ID', loadUrl: `${url}/Tasks`, insertUrl: `${url}/InsertTask`, updateUrl: `${url}/UpdateTask`, deleteUrl: `${url}/DeleteTask`, onBeforeSend(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; }, }); this.employeesData = AspNetData.createStore({ key: 'ID', loadUrl: `${url}/TaskEmployees`, }); } initNewRow(e: DxTreeListTypes.InitNewRowEvent) { e.data.Task_Status = 'Not Started'; e.data.Task_Start_Date = new Date(); e.data.Task_Due_Date = new Date(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #tree-list { max-height: 640px; }

<!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" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></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; } } }