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!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@using DevExtreme.MVC.Demos.Models.TreeList
@using DevExtreme.MVC.Demos.Models
@model IEnumerable<Employee>
@(Html.DevExtreme().TreeList<Employee>()
.ID("employees")
.DataSource(Model)
.KeyExpr("ID")
.ParentIdExpr("HeadID")
.Columns(column => {
column.AddFor(m => m.Title);
column.AddFor(m => m.FullName)
.AllowHiding(false);
column.AddFor(m => m.City);
column.AddFor(m => m.State);
column.Add()
.Caption("Contacts")
.Columns(a => {
a.AddFor(m => m.MobilePhone)
.AllowHiding(false);
a.AddFor(m => m.Email);
a.AddFor(m => m.Skype)
.Visible(false);
});
column.AddFor(m => m.HireDate);
})
.ColumnAutoWidth(true)
.ShowRowLines(true)
.ShowBorders(true)
.ColumnChooser(cc => {
cc
.Enabled(true)
.Mode(GridColumnChooserMode.Select)
.Position(pc => pc
.My(HorizontalAlignment.Right, VerticalAlignment.Top)
.At(HorizontalAlignment.Right, VerticalAlignment.Bottom)
.Of(".dx-treelist-column-chooser-button")
);
cc.Search(ccs => ccs
.Enabled(true)
.EditorOptions(new { Placeholder = "Search column" })
);
cc.Selection(ccs => ccs
.AllowSelectAll(true)
.SelectByClick(true)
.Recursive(true)
);
})
.ExpandedRowKeys(new[] { 1, 5 })
)
<div class="options">
<div class="caption">Options</div>
<div class="selectboxes-container">
<div class="option">
<span>Column chooser mode</span>
@{
var dataSource = new[] {
new ColumnChooserMode {
Key = "dragAndDrop",
Name = "Drag and drop"
},
new ColumnChooserMode {
Key = "select",
Name = "Select"
}
};
}
@(Html.DevExtreme().SelectBox()
.DataSource(dataSource)
.Value(dataSource[1].Key)
.ValueExpr("Key")
.InputAttr("aria-label", "Column Chooser Mode")
.DisplayExpr("Name")
.OnValueChanged(@<text>
function(data) {
var treeList = $("#employees").dxTreeList("instance");
treeList.option("columnChooser.mode", data.value);
const isDragMode = dataSource[0].key === data.value;
$('#allowSelectAll').dxCheckBox('instance').option('disabled', isDragMode);
$('#selectByClick').dxCheckBox('instance').option('disabled', isDragMode);
$('#recursive').dxCheckBox('instance').option('disabled', isDragMode);
}
</text>)
)
</div>
</div>
<div class="checkboxes-container">
<div class="option">
@(Html.DevExtreme().CheckBox()
.Text("Search enabled")
.Value(true)
.OnValueChanged(@<text>
function(data) {
var treeList = $("#employees").dxTreeList("instance");
treeList.option("columnChooser.search.enabled", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("allowSelectAll")
.Text("Allow select all")
.Value(true)
.OnValueChanged(@<text>
function(data) {
var treeList = $("#employees").dxTreeList("instance");
treeList.option("columnChooser.selection.allowSelectAll", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("selectByClick")
.Text("Select by click")
.Value(true)
.OnValueChanged(@<text>
function(data) {
var treeList = $("#employees").dxTreeList("instance");
treeList.option("columnChooser.selection.selectByClick", data.value);
}
</text>)
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("recursive")
.Text("Recursive")
.Value(true)
.OnValueChanged(@<text>
function(data) {
var treeList = $("#employees").dxTreeList("instance");
treeList.option("columnChooser.selection.recursive", data.value);
}
</text>)
)
</div>
</div>
</div>
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
namespace DevExtreme.MVC.Demos.Controllers {
public class TreeListController : Controller {
public ActionResult ColumnChooser() {
return View(SampleData.TreeListEmployees);
}
}
}
using System;
using System.ComponentModel.DataAnnotations;
namespace DevExtreme.MVC.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 DevExtreme.MVC.Demos.Models.TreeList;
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.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 = "jheart@dx-email.com",
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 = "samanthab@dx-email.com",
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 = "arthurm@dx-email.com",
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 = "robertr@dx-email.com",
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 = "gretas@dx-email.com",
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 = "brettw@dx-email.com",
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 = "sandraj@dx-email.com",
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 = "edwardh@dx-email.com",
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 = "barbarab@dx-email.com",
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 = "kevinc@dx-email.com",
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 = "cindys@dx-email.com",
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 = "sammyh@dx-email.com",
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 = "davidj@dx-email.com",
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 = "victorn@dx-email.com",
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 = "marys@dx-email.com",
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 = "robinc@dx-email.com",
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 = "kellyr@dx-email.com",
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 = "jamesa@dx-email.com",
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 = "anthonyr@dx-email.com",
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 = "oliviap@dx-email.com",
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 = "taylorr@dx-email.com",
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 = "ameliah@dx-email.com",
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 = "wallyh@dx-email.com",
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 = "bradleyj@dx-email.com",
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 = "kareng@dx-email.com",
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 = "marcuso@dx-email.com",
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 = "sandrab@dx-email.com",
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 = "morgank@dx-email.com",
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 = "violetb@dx-email.com",
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 = "kents@dx-email.com",
Address = "12100 Mora Dr",
Zipcode = 90670,
HomePhone = "5625559248",
Skype = "kents_DX_skype",
City = "St. Louis",
State = "Missouri"
}
};
}
}
#employees {
max-height: 440px;
}
.options {
padding: 20px;
margin-top: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.option > span {
margin-right: 10px;
}
.option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
}
.selectbox-container {
display: flex;
}
.checkboxes-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 15px;
}
.checkboxes-container > .option {
margin: 10px 30px 10px 0;
width: 200px;
}
To open the column chooser, users should click the button in the toolbar above the TreeList. The way users show and hide columns depends on the columnChooser.mode:
-
"dragAndDrop"
Users drag and drop column headers to and from the column chooser. -
"select"
Users select and deselect check boxes with column names.
In "select" mode, you can choose whether parent element selection affects child/nested elements. Use the selection.recursive property.
If the column chooser contains many hidden columns, you can enable the column search UI. Assign true to the search.enabled property.
In this demo, use the check boxes below the TreeList to toggle the selection and search features.
To hide a column in code, set the columns[].visible property to false.