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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<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>
import {
DxTreeList,
DxRemoteOperations,
DxColumn,
DxSearchPanel,
DxHeaderFilter,
DxEditing,
DxRequiredRule,
DxLookup,
} from 'devextreme-vue/tree-list';
import AspNetData from 'devextreme-aspnet-data-nojquery';
const url = 'https://js.devexpress.com/Demos/Mvc/api/TreeListTasks';
export default {
components: {
DxTreeList,
DxRemoteOperations,
DxColumn,
DxSearchPanel,
DxHeaderFilter,
DxEditing,
DxRequiredRule,
DxLookup,
},
data() {
return {
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 };
},
}),
employeesData: AspNetData.createStore({
key: 'ID',
loadUrl: `${url}/TaskEmployees`,
}),
statusesData: [
'Not Started',
'Need Assistance',
'In Progress',
'Deferred',
'Completed',
],
};
},
methods: {
initNewRow(e) {
e.data.Task_Status = 'Not Started';
e.data.Task_Start_Date = new Date();
e.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>
<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=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.6/css/dx.light.css" />
<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.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme-aspnet-data-nojquery': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.40/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@2.8.6/index.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.1.6/cjs',
'devextreme-vue': 'npm:devextreme-vue@22.1.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.18/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.65/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.33/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.7.1/standalone.js',
'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);
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; }
}
}