Backend API
<div id="tree-list-demo">
@(Html.DevExtreme().TreeList<DevExtreme.NETCore.Demos.Models.TreeList.Employee>()
.ID("employees")
.DataSource(ds => ds.Mvc()
.Controller("TreeListEmployees")
.LoadAction("Get")
.UpdateAction("Put")
.InsertAction("Post")
.DeleteAction("Delete")
.Key("ID")
)
.KeyExpr("ID")
.ParentIdExpr("HeadID")
.ShowRowLines(true)
.ShowBorders(true)
.Editing(editing => editing
.Mode(GridEditMode.Form)
.AllowUpdating(true)
.AllowDeleting(new JS("allowDeleting"))
.AllowAdding(true)
)
.Columns(columns => {
columns.AddFor(m => m.FullName);
columns.AddFor(m => m.Prefix);
columns.AddFor(m => m.HeadID)
.Width(150)
.Visible(false)
.Lookup(lookup => lookup
.DataSource(ds => ds.Mvc().Controller("TreeListEmployees").LoadAction("Get").Key("ID"))
.DataSourceOptions(dso => dso.Sort(sort => sort.AddSorting("FullName")))
.ValueExpr("ID")
.DisplayExpr("FullName")
);
columns.AddFor(m => m.Title);
columns.AddFor(m => m.City)
.Width(150);
columns.AddFor(m => m.HireDate)
.Width(120);
columns.Add()
.Type(TreeListCommandColumnType.Buttons)
.Buttons(b => {
b.Add().Name(TreeListColumnButtonName.Edit);
b.Add().Name(TreeListColumnButtonName.Delete);
});
})
.ColumnAutoWidth(true)
.OnEditorPreparing("treeList_onEditorPreparing")
.OnInitNewRow("treeList_onInitNewRow")
.ExpandedRowKeys(new[] { 1, 2, 3, 4, 5 })
)
</div>
<script>
function treeList_onEditorPreparing(e) {
if(e.dataField === "HeadID" && e.row.data.ID === 1) {
e.editorOptions.disabled = true;
e.editorOptions.value = null;
}
}
function treeList_onInitNewRow(e) {
e.data.HeadID = 1;
}
function allowDeleting(e) {
return e.row.data.ID !== 1;
}
</script>
using Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
namespace DevExtreme.NETCore.Demos.Controllers {
public class TreeListController : Controller {
public ActionResult FormEditing() {
return View();
}
}
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExpress.Utils.Serializing.Helpers;
using DevExtreme.NETCore.Demos.Models.TreeList;
using System;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Caching.Memory;
namespace DevExtreme.NETCore.Demos.Controllers.ApiControllers {
[Route("api/[controller]")]
public class TreeListEmployeesController : Controller {
InMemoryEmployeesDataContext db;
public TreeListEmployeesController(IHttpContextAccessor httpContextAccessor, IMemoryCache memoryCache) {
db = new InMemoryEmployeesDataContext(httpContextAccessor, memoryCache);
}
[HttpGet]
public object Get(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(db.Employees, loadOptions);
}
[HttpPost]
public IActionResult Post(string values) {
var newEmployee = new Employee();
JsonPopulateObjectExtensions.PopulateObject(values, newEmployee);
if(!TryValidateModel(newEmployee))
return BadRequest(ModelState.GetFullErrorMessage());
db.Employees.Add(newEmployee);
db.SaveChanges();
return Ok();
}
[HttpPut]
public IActionResult Put(int key, string values) {
var employee = db.Employees.First(e => e.ID == key);
JsonPopulateObjectExtensions.PopulateObject(values, employee);
if(!TryValidateModel(employee))
return BadRequest(ModelState.GetFullErrorMessage());
db.SaveChanges();
return Ok();
}
[HttpDelete]
public void Delete(int key) {
var employee = db.Employees.First(e => e.ID == key);
db.Employees.Remove(employee);
db.SaveChanges();
}
}
}
using System;
using System.ComponentModel.DataAnnotations;
namespace DevExtreme.NETCore.Demos.Models.TreeList {
public class Employee {
public int ID { get; set; }
[Required]
[Display(Name = "Head")]
public int HeadID { get; set; }
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public string FullName { get; set; }
[Required]
[Display(Name = "Title")]
public string Prefix { get; set; }
[Required]
[Display(Name = "Position")]
public string Title { get; set; }
[Required]
public string Department { get; set; }
[Required]
public string City { get; set; }
public string State { get; set; }
public string Address { get; set; }
public int Zipcode { get; set; }
public string Email { get; set; }
public string Skype { get; set; }
public string MobilePhone { get; set; }
public string HomePhone { get; set; }
public DateTime BirthDate { get; set; }
[Required]
public DateTime HireDate { get; set; }
}
}
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Caching.Memory;
using System;
using System.Collections.Generic;
namespace DevExtreme.NETCore.Demos.Models.TreeList {
public class InMemoryEmployeesDataContext : InMemoryDataContext<Employee> {
public InMemoryEmployeesDataContext(IHttpContextAccessor contextAccessor, IMemoryCache memoryCache)
: base(contextAccessor, memoryCache) {
}
public ICollection<Employee> Employees => ItemsInternal;
protected override IEnumerable<Employee> Source => SampleData.SampleData.TreeListEmployees;
protected override int GetKey(Employee item) => item.ID;
protected override void SetKey(Employee item, int key) => item.ID = key;
}
}
using DevExtreme.NETCore.Demos.Models.TreeList;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Employee> TreeListEmployees = new[] {
new Employee {
ID = 1,
HeadID = 0,
FirstName = "John",
LastName = "Heart",
FullName = "John Heart",
MobilePhone = "(213) 555-9392",
Prefix = "Mr.",
Title ="CEO",
Department = "Management",
BirthDate = DateTime.Parse("1964/03/16"),
HireDate = DateTime.Parse("1995/01/15"),
Email = "[email protected]",
Address = "351 S Hill St.",
Zipcode = 90013,
HomePhone = "(213) 555-9208",
Skype = "jheart_DX_skype",
City = "Los Angeles",
State = "California"
},
new Employee {
ID = 2,
HeadID = 1,
FirstName = "Samantha",
LastName = "Bright",
FullName = "Samantha Bright",
MobilePhone = "(213) 555-2858",
Prefix = "Dr.",
Title ="COO",
Department = "Management",
BirthDate = DateTime.Parse("1966/05/02"),
HireDate = DateTime.Parse("2004/05/24"),
Email = "[email protected]",
Address = "5801 Wilshire Blvd.",
Zipcode = 90036,
HomePhone = "2135550288",
Skype = "samanthab_DX_skype",
City = "Los Angeles",
State = "California"
},
new Employee {
ID = 3,
HeadID = 1,
FirstName = "Arthur",
LastName = "Miller",
FullName = "Arthur Miller",
MobilePhone = "3105558583",
Prefix = "Mr.",
Title = "CTO",
Department = "Management",
BirthDate = DateTime.Parse("1972/07/11"),
HireDate = DateTime.Parse("2007/12/18"),
Email = "[email protected]",
Address = "3800 Homer St.",
Zipcode = 90031,
HomePhone = "3105556542",
Skype = "arthurm_DX_skype",
City = "Denver",
State = "Colorado"
},
new Employee {
ID = 4,
HeadID = 1,
FirstName = "Robert",
LastName = "Reagan",
FullName = "Robert Reagan",
MobilePhone = "8185552387",
Prefix = "Mr.",
Title = "CMO",
Department = "Management",
BirthDate = DateTime.Parse("1974/09/07"),
HireDate = DateTime.Parse("2002/11/08"),
Email = "[email protected]",
Address = "4 Westmoreland Pl.",
Zipcode = 91103,
HomePhone = "8185552438",
Skype = "robertr_DX_skype",
City = "Bentonville",
State = "Arkansas"
},
new Employee {
ID = 5,
HeadID = 1,
FirstName = "Greta",
LastName = "Sims",
FullName = "Greta Sims",
MobilePhone = "8185556546",
Prefix = "Ms.",
Title = "HR Manager",
Department = "Human Resources",
BirthDate = DateTime.Parse("1977/11/22"),
HireDate = DateTime.Parse("1998/04/23"),
Email = "[email protected]",
Address = "1700 S Grandview Dr.",
Zipcode = 91803,
HomePhone = "8185550976",
Skype = "gretas_DX_skype",
City = "Atlanta",
State = "Georgia"
},
new Employee {
ID = 6,
HeadID = 3,
FirstName = "Brett",
LastName = "Wade",
FullName = "Brett Wade",
MobilePhone = "6265550358",
Prefix = "Mr.",
Title = "IT Manager",
Department = "IT",
BirthDate = DateTime.Parse("1968/12/01"),
HireDate = DateTime.Parse("2009/03/06"),
Email = "[email protected]",
Address = "1120 Old Mill Rd.",
Zipcode = 91108,
HomePhone = "6265555985",
Skype = "brettw_DX_skype",
City = "Reno",
State = "Nevada"
},
new Employee {
ID = 7,
HeadID = 5,
FirstName = "Sandra",
LastName = "Johnson",
FullName = "Sandra Johnson",
MobilePhone = "5625552082",
Prefix = "Mrs.",
Title = "Controller",
Department = "Human Resources",
BirthDate = DateTime.Parse("1974/11/15"),
HireDate = DateTime.Parse("2005/05/11"),
Email = "[email protected]",
Address = "4600 N Virginia Rd.",
Zipcode = 90807,
HomePhone = "5625558272",
Skype = "sandraj_DX_skype",
City = "Beaver",
State = "Utah"
},
new Employee {
ID = 8,
HeadID = 4,
FirstName = "Edward",
LastName = "Holmes",
FullName = "Ed Holmes",
MobilePhone = "3105551288",
Prefix = "Dr.",
Title = "Sales Manager",
Department = "Sales",
BirthDate = DateTime.Parse("1973/07/14"),
HireDate = DateTime.Parse("2005/06/19"),
Email = "[email protected]",
Address = "23200 Pacific Coast Hwy",
Zipcode = 90265,
HomePhone = "3105556098",
Skype = "edwardh_DX_skype",
City = "Malibu",
State = "California"
},
new Employee {
ID = 9,
HeadID = 3,
FirstName = "Barbara",
LastName = "Banks",
FullName = "Barb Banks",
MobilePhone = "3105553355",
Prefix = "Mrs.",
Title = "Support Manager",
Department = "Support",
BirthDate = DateTime.Parse("1979/04/14"),
HireDate = DateTime.Parse("2002/08/07"),
Email = "[email protected]",
Address = "17985 Pacific Coast Hwy",
Zipcode = 90272,
HomePhone = "3105559792",
Skype = "barbarab_DX_skype",
City = "Phoenix",
State = "Arizona"
},
new Employee {
ID = 10,
HeadID = 2,
FirstName = "Kevin",
LastName = "Carter",
FullName = "Kevin Carter",
MobilePhone = "2135552840",
Prefix = "Mr.",
Title = "Shipping Manager",
Department = "Shipping",
BirthDate = DateTime.Parse("1978/01/09"),
HireDate = DateTime.Parse("2009/08/11"),
Email = "[email protected]",
Address = "424 N Main St.",
Zipcode = 90012,
HomePhone = "2135558038",
Skype = "kevinc_DX_skype",
City = "San Diego",
State = "California"
},
new Employee {
ID = 11,
HeadID = 5,
FirstName = "Cynthia",
LastName = "Stanwick",
FullName = "Cindy Stanwick",
MobilePhone = "8185556655",
Prefix = "Ms.",
Title = "HR Assistant",
Department = "Human Resources",
BirthDate = DateTime.Parse("1985/06/05"),
HireDate = DateTime.Parse("2008/03/24"),
Email = "[email protected]",
Address = "2211 Bonita Dr.",
Zipcode = 91208,
HomePhone = "8185550828",
Skype = "cindys_DX_skype",
City = "Little Rock",
State = "Arkansas"
},
new Employee {
ID = 12,
HeadID = 8,
FirstName = "Sam",
LastName = "Hill",
FullName = "Sammy Hill",
MobilePhone = "6265557292",
Prefix = "Mr.",
Title = "Sales Assistant",
Department = "Sales",
BirthDate = DateTime.Parse("1984/02/17"),
HireDate = DateTime.Parse("2012/02/01"),
Email = "[email protected]",
Address = "645 Prospect Crescent",
Zipcode = 91103,
HomePhone = "6265543168",
Skype = "sammyh_DX_skype",
City = "Pasadena",
State = "California"
},
new Employee {
ID = 13,
HeadID = 10,
FirstName = "David",
LastName = "Jones",
FullName = "Davey Jones",
MobilePhone = "6265550281",
Prefix = "Mr.",
Title = "Shipping Assistant",
Department = "Shipping",
BirthDate = DateTime.Parse("1983/03/06"),
HireDate = DateTime.Parse("2011/04/24"),
Email = "[email protected]",
Address = "391 S Orange Grove Blvd.",
Zipcode = 91184,
HomePhone = "6265554422",
Skype = "davidj_DX_skype",
City = "Pasadena",
State = "California"
},
new Employee {
ID = 14,
HeadID = 10,
FirstName = "Victor",
LastName = "Norris",
FullName = "Victor Norris",
MobilePhone = "2135559278",
Prefix = "Mr.",
Title = "Shipping Assistant",
Department = "Shipping",
BirthDate = DateTime.Parse("1986/07/23"),
HireDate = DateTime.Parse("2012/07/23"),
Email = "[email protected]",
Address = "811 West 7th St.",
Zipcode = 90017,
HomePhone = "2135552827",
Skype = "victorn_DX_skype",
City = "Little Rock",
State = "Arkansas"
},
new Employee {
ID = 15,
HeadID = 10,
FirstName = "Mary",
LastName = "Stern",
FullName = "Mary Stern",
MobilePhone = "8185557857",
Prefix = "Ms.",
Title = "Shipping Assistant",
Department = "Shipping",
BirthDate = DateTime.Parse("1982/04/08"),
HireDate = DateTime.Parse("2012/08/12"),
Email = "[email protected]",
Address = "113 N Cedar St.",
Zipcode = 91206,
HomePhone = "8185558375",
Skype = "marys_DX_skype",
City = "Beaver",
State = "Utah"
},
new Employee {
ID = 16,
HeadID = 10,
FirstName = "Robin",
LastName = "Cosworth",
FullName = "Robin Cosworth",
MobilePhone = "8185550942",
Prefix = "Mrs.",
Title = "Shipping Assistant",
Department = "Shipping",
BirthDate = DateTime.Parse("1981/06/12"),
HireDate = DateTime.Parse("2012/09/01"),
Email = "[email protected]",
Address = "501 N Main St.",
Zipcode = 90012,
HomePhone = "8185559266",
Skype = "robinc_DX_skype",
City = "Los Angeles",
State = "California"
},
new Employee {
ID = 17,
HeadID = 9,
FirstName = "Kelly",
LastName = "Rodriguez",
FullName = "Kelly Rodriguez",
MobilePhone = "8185559248",
Prefix = "Ms.",
Title = "Support Assistant",
Department = "Support",
BirthDate = DateTime.Parse("1988/05/11"),
HireDate = DateTime.Parse("2012/10/13"),
Email = "[email protected]",
Address = "1601 W Mountain St.",
Zipcode = 91201,
HomePhone = "8185559792",
Skype = "kellyr_DX_skype",
City = "Boise",
State = "Idaho"
},
new Employee {
ID = 18,
HeadID = 9,
FirstName = "James",
LastName = "Anderson",
FullName = "James Anderson",
MobilePhone = "3235554702",
Prefix = "Mr.",
Title = "Support Assistant",
Department = "Support",
BirthDate = DateTime.Parse("1987/01/29"),
HireDate = DateTime.Parse("2012/10/18"),
Email = "[email protected]",
Address = "4800 Hollywood Blvd",
Zipcode = 90027,
HomePhone = "3235552087",
Skype = "jamesa_DX_skype",
City = "Atlanta",
State = "Georgia"
},
new Employee {
ID = 19,
HeadID = 9,
FirstName = "Anthony",
LastName = "Remmen",
FullName = "Antony Remmen",
MobilePhone = "3105556625",
Prefix = "Mr.",
Title = "Support Assistant",
Department = "Support",
BirthDate = DateTime.Parse("1986/02/19"),
HireDate = DateTime.Parse("2013/01/19"),
Email = "[email protected]",
Address = "1542 S Beacon St",
Zipcode = 90731,
HomePhone = "3105550009",
Skype = "anthonyr_DX_skype",
City = "Boise",
State = "Idaho"
},
new Employee {
ID = 20,
HeadID = 8,
FirstName = "Olivia",
LastName = "Peyton",
FullName = "Olivia Peyton",
MobilePhone = "3105552728",
Prefix = "Mrs.",
Title = "Sales Assistant",
Department = "Sales",
BirthDate = DateTime.Parse("1981/06/03"),
HireDate = DateTime.Parse("2012/05/14"),
Email = "[email protected]",
Address = "807 W Paseo Del Mar",
Zipcode = 90731,
HomePhone = "3105558247",
Skype = "oliviap_DX_skype",
City = "Atlanta",
State = "Georgia"
},
new Employee {
ID = 21,
HeadID = 6,
FirstName = "Taylor",
LastName = "Riley",
FullName = "Taylor Riley",
MobilePhone = "3105557276",
Prefix = "Mr.",
Title = "Network Admin",
Department = "IT",
BirthDate = DateTime.Parse("1982/08/14"),
HireDate = DateTime.Parse("2012/04/14"),
Email = "[email protected]",
Address = "7776 Torreyson Dr",
Zipcode = 90046,
HomePhone = "3105552134",
Skype = "taylorr_DX_skype",
City = "San Jose",
State = "California"
},
new Employee {
ID = 22,
HeadID = 6,
FirstName = "Amelia",
LastName = "Harper",
FullName = "Amelia Harper",
MobilePhone = "2135554276",
Prefix = "Mrs.",
Title = "Network Admin",
Department = "IT",
BirthDate = DateTime.Parse("1983/11/19"),
HireDate = DateTime.Parse("2011/02/10"),
Email = "[email protected]",
Address = "527 W 7th St",
Zipcode = 90014,
HomePhone = "2135553792",
Skype = "ameliah_DX_skype",
City = "Los Angeles",
State = "California"
},
new Employee {
ID = 23,
HeadID = 6,
FirstName = "Walter",
LastName = "Hobbs",
FullName = "Wally Hobbs",
MobilePhone = "8185558872",
Prefix = "Mr.",
Title = "Programmer",
Department = "IT",
BirthDate = DateTime.Parse("1984/12/24"),
HireDate = DateTime.Parse("2011/02/17"),
Email = "[email protected]",
Address = "10385 Shadow Oak Dr",
Zipcode = 91311,
HomePhone = "8185552478",
Skype = "wallyh_DX_skype",
City = "Chatsworth",
State = "California"
},
new Employee {
ID = 24,
HeadID = 6,
FirstName = "Bradley",
LastName = "Jameson",
FullName = "Brad Jameson",
MobilePhone = "8185554646",
Prefix = "Mr.",
Title = "Programmer",
Department = "IT",
BirthDate = DateTime.Parse("1988/10/12"),
HireDate = DateTime.Parse("2011/03/02"),
Email = "[email protected]",
Address = "1100 Pico St",
Zipcode = 91340,
HomePhone = "8185559098",
Skype = "bradleyj_DX_skype",
City = "San Fernando",
State = "California"
},
new Employee {
ID = 25,
HeadID = 6,
FirstName = "Karen",
LastName = "Goodson",
FullName = "Karen Goodson",
MobilePhone = "6265550908",
Prefix = "Miss",
Title = "Programmer",
Department = "IT",
BirthDate = DateTime.Parse("1987/04/26"),
HireDate = DateTime.Parse("2011/03/14"),
Email = "[email protected]",
Address = "309 Monterey Rd",
Zipcode = 91030,
HomePhone = "6265550822",
Skype = "kareng_DX_skype",
City = "South Pasadena",
State = "California"
},
new Employee {
ID = 26,
HeadID = 5,
FirstName = "Marcus",
LastName = "Orbison",
FullName = "Marcus Orbison",
MobilePhone = "2135557098",
Prefix = "Mr.",
Title = "Travel Coordinator",
Department = "Human Resources",
BirthDate = DateTime.Parse("1982/03/02"),
HireDate = DateTime.Parse("2005/05/19"),
Email = "[email protected]",
Address = "501 N Main St",
Zipcode = 90012,
HomePhone = "2135552608",
Skype = "marcuso_DX_skype",
City = "Los Angeles",
State = "California"
},
new Employee {
ID = 27,
HeadID = 5,
FirstName = "Sandra",
LastName = "Bright",
FullName = "Sandy Bright",
MobilePhone = "8185550524",
Prefix = "Ms.",
Title = "Benefits Coordinator",
Department = "Human Resources",
BirthDate = DateTime.Parse("1983/09/11"),
HireDate = DateTime.Parse("2005/06/04"),
Email = "[email protected]",
Address = "7570 McGroarty Ter",
Zipcode = 91042,
HomePhone = "8185555072",
Skype = "sandrab_DX_skype",
City = "Denver",
State = "Colorado"
},
new Employee {
ID = 28,
HeadID = 6,
FirstName = "Morgan",
LastName = "Kennedy",
FullName = "Morgan Kennedy",
MobilePhone = "8185558238",
Prefix = "Mrs.",
Title = "Graphic Designer",
Department = "IT",
BirthDate = DateTime.Parse("1984/07/17"),
HireDate = DateTime.Parse("2012/01/11"),
Email = "[email protected]",
Address = "11222 Dilling St",
Zipcode = 91604,
HomePhone = "8185553973",
Skype = "morgank_DX_skype",
City = "San Fernando Valley",
State = "California"
},
new Employee {
ID = 29,
HeadID = 28,
FirstName = "Violet",
LastName = "Bailey",
FullName = "Violet Bailey",
MobilePhone = "8185552478",
Prefix = "Ms.",
Title = "Jr Graphic Designer",
Department = "IT",
BirthDate = DateTime.Parse("1985/06/10"),
HireDate = DateTime.Parse("2012/01/19"),
Email = "[email protected]",
Address = "1418 Descanso Dr",
Zipcode = 91011,
HomePhone = "8185553085",
Skype = "violetb_DX_skype",
City = "La Canada",
State = "California"
},
new Employee {
ID = 30,
HeadID = 5,
FirstName = "Kent",
LastName = "Samuelson",
FullName = "Ken Samuelson",
MobilePhone = "5625559282",
Prefix = "Dr.",
Title = "Ombudsman",
Department = "Human Resources",
BirthDate = DateTime.Parse("1972/09/11"),
HireDate = DateTime.Parse("2009/04/22"),
Email = "[email protected]",
Address = "12100 Mora Dr",
Zipcode = 90670,
HomePhone = "5625559248",
Skype = "kents_DX_skype",
City = "St. Louis",
State = "Missouri"
}
};
}
}
#employees {
max-height: 640px;
}
A column's default editor is defined automatically based on this column's dataType. To customize this editor or replace it with another editor, use the column's formItem object. For information on settings that you can define in the formItem object, refer to the SimpleItem help topic.
You can also set up the edit Form from scratch. The component's configuration section lists available settings. Specify these settings in the editing.form object. Refer to this object's description for information about form edit mode limitations.
This demo also illustrates the following event handlers:
-
onInitNewRow
Populates form editors of a new row with default values. In this demo, onInitNewRow sets "John Heart" as the initialHeadfor new rows. -
onEditorPreparing
Customizes form editors. In this demo, this handler forbids users to edit theHeadvalue of John Heart.
Refer to the following help topic to see the full list of the events that edit operations raise: Editing Events.