Backend API
x
DevExtreme.NETCore.Demos.Models.TreeList IEnumerable<Employee>(Html.DevExtreme().TreeList<Employee>() .ID("employees") .DataSource(Model) .KeyExpr("ID") .ParentIdExpr("HeadID") .ColumnFixing(c => c.Enabled(true)) .ShowRowLines(true) .ShowBorders(true) .ColumnAutoWidth(true) .AutoExpandAll(true) .Columns(columns => { columns.Add() .Caption("Employee") .Fixed(true) .CalculateCellValue(<text> function(data) { return [data.Prefix, data.FirstName, data.LastName] .join(" "); } </text>); columns.AddFor(m => m.Title) .Alignment(HorizontalAlignment.Right); columns.AddFor(m => m.Address) .Fixed(true) .FixedPosition(FixedPosition.Sticky); columns.AddFor(m => m.City); columns.AddFor(m => m.Zipcode); columns.AddFor(m => m.State); columns.AddFor(m => m.Department) .Fixed(true) .FixedPosition(FixedPosition.Right); columns.AddFor(m => m.BirthDate) .DataType(GridColumnDataType.Date); columns.AddFor(m => m.HireDate) .DataType(GridColumnDataType.Date); columns.AddFor(m => m.HomePhone); columns.AddFor(m => m.MobilePhone); columns.AddFor(m => m.Email); columns.AddFor(m => m.Skype); }))xxxxxxxxxxusing Microsoft.AspNetCore.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;namespace DevExtreme.NETCore.Demos.Controllers { public class TreeListController : Controller { public ActionResult FixedAndStickyColumns() { return View(SampleData.TreeListEmployees); } }}xxxxxxxxxxusing 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; } }}xxxxxxxxxxusing 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 = "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" } }; }}xxxxxxxxxx#employees { max-height: 440px;}To fix a column programmatically, set its fixed property to true and specify the desired fixedPosition:
-
'left' (default if
fixed: true)
The column is fixed to the leftmost edge of the grid. -
'right'
The column is fixed to the rightmost edge of the grid. -
'sticky'
The column "sticks" to the left or rightmost edge when it reaches either side of the grid.
To fix (or unfix) a column, right-click a column header and select the desired operation using the component's built-in context menu. To prevent users from fixing/unfixing columns, disable columns[].allowFixing.
You can scroll the component's data horizontally with Shift + Scroll Wheel. Jump to the first/last cell of the focused row using Home/End. Focus the first cell of the first row/last cell of the last row with Ctrl + Home/Ctrl + End.