Tree List - Column Reordering

DevExtreme DataGrid columns use the same display order as fields in the component's dataSource. You can specify a different display order with the columns[] array. To reorder a column at runtime, change the columns[].visibleIndex property.

Backend API

​x
 
@using DevExtreme.NETCore.Demos.Models.TreeList​@model IEnumerable<Employee>​@(Html.DevExtreme().TreeList<Employee>()    .ID("employees")    .DataSource(Model)    .KeyExpr("ID")    .ParentIdExpr("HeadID")    .AllowColumnReordering(true)    .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)            .Fixed(true)            .Alignment(HorizontalAlignment.Right);​        columns.AddFor(m => m.Address);​        columns.AddFor(m => m.City);​        columns.AddFor(m => m.Zipcode);​        columns.AddFor(m => m.State);​        columns.AddFor(m => m.Department);​        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);    }))​

xxxxxxxxxx
 
using Microsoft.AspNetCore.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;​namespace DevExtreme.NETCore.Demos.Controllers {    public class TreeListController : Controller {        public ActionResult Reordering() {            return View(SampleData.TreeListEmployees);        }    }}

xxxxxxxxxx
 
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; }    }}​

xxxxxxxxxx
 
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 = "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 allow users to reorder columns, set allowColumnReordering to true. To disable reordering operations for a specific column, assign false to its allowReordering property.

Users can reorder columns with mouse drag-and-drop operations or with keyboard shortcuts:

Ctrl/Cmd+Left Arrow
Move the focused column to the left.
Ctrl/Cmd+Right Arrow
Move the focused column to the right.

Reordering operations are also available in the component's context menu.

This demo illustrates fixed column behavior during user-initiated column reorder operations. Users can drag & drop columns within the following areas (but not between them):

Columns fixed to the left
Non-fixed columns
Columns fixed to the right

Sticky columns (fixed with the 'sticky' position) behave like non-fixed columns during reorder operations (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open the TreeList’s context menu. Choose "Set Fixed Position -> Sticky" to stick a given column.