Vue Tree List - Web API Service

To access a Web API service from the client, use the createStore method from the DevExtreme.AspNet.Data extension. This extension also allows you to process data for DevExtreme components on the server. The server-side implementation is available under the TreeListTasksController.cs tab in the ASP.NET MVC and ASP.NET Core versions of this demo.

To notify the TreeList that data is processed on the server, set the remoteOperations property to true.

Was this demo helpful?

Thank you!

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!

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, DxTreeListTypes, } from 'devextreme-vue/tree-list'; import { createStore } from 'devextreme-aspnet-data-nojquery'; const url = 'https://js.devexpress.com/Demos/Mvc/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 scoped> #tree-list { max-height: 640px; } </style>

import { createApp } from 'vue'; import App from './App.vue'; 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/24.1.6/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </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 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