Data Grids / Data Management ▸ Customize Keyboard Navigation

The following properties customize keyboard navigation:

  • enterKeyAction
    Specifies the TreeList's actions when a user presses Enter key:

    • "moveFocus" - moves focus in the enterKeyDirection
    • "startEdit" (default) - switches the cell to the editing state
  • enterKeyDirection
    Specifies the direction in which to move focus when a user presses Enter:

    • "row"
    • "column"
    • "none" (default)
  • editOnKeyPress
    Specifies whether to start entering a new cell value on a key press.

In this demo, you can use the controls under the TreeList to change any of these properties.

Options
Enter Key Action
Enter Key Direction
<div id="tree-list-demo">
    @(Html.DevExtreme().TreeList<DevExtreme.MVC.Demos.Models.TreeList.Employee>()
        .ID("treeListContainer")
        .DataSource(d => d.WebApi()
            .Controller("TreeListEmployees")
            .UpdateAction(true)
            .DeleteAction(true)
            .Key("ID")
        )
        .KeyExpr("ID")
        .ParentIdExpr("HeadID")
        .ColumnAutoWidth(true)
        .ExpandedRowKeys(new[] { 1, 2, 4, 5 })
        .OnFocusedCellChanging(@<text>
            function(e) {
                e.isHighlighted = true;
            }
        </text>)
        .KeyboardNavigation(navigation => {
            navigation.EnterKeyAction(GridEnterKeyAction.MoveFocus);
            navigation.EnterKeyDirection(GridEnterKeyDirection.Column);
            navigation.EditOnKeyPress(true);
        })
        .Editing(editing => {
            editing.Mode(GridEditMode.Batch);
            editing.AllowUpdating(true);
            editing.StartEditAction(GridStartEditAction.DblClick);
        })
        .Columns(column => {
            column.AddFor(m => m.FullName);
            column.AddFor(m => m.Prefix);
            column.AddFor(m => m.Title);
            column.AddFor(m => m.City);
            column.AddFor(m => m.HireDate);
        })
    )

    <div class="options">
        <div class="caption">Options</div>
        <div class="option-container">
            <div class="option check-box">
                <div id="editOnKeyPress"></div>
                @(Html.DevExtreme().CheckBox()
                    .ID("editOnKeyPress")
                    .Text("Edit On Key Press")
                    .Value(true)
                    .OnValueChanged(@<text>
                        function(data) {
                            var dataGrid = $("#treeListContainer").dxTreeList("instance");
                            dataGrid.option("keyboardNavigation.editOnKeyPress", data.value);
                        }
                    </text>)
                )
            </div>
            <div class="option">
                <span class="option-caption">Enter Key Action</span>
                @{
                    var enterKeyActionDataSource = new[]{ "startEdit", "moveFocus" };
                }

                @(Html.DevExtreme().SelectBox()
                    .ID("enterKeyAction")
                    .DataSource(enterKeyActionDataSource)
                    .InputAttr("aria-label", "Key Action")
                    .Value(enterKeyActionDataSource[1])
                    .OnValueChanged(@<text>
                        function(data) {
                            var dataGrid = $("#treeListContainer").dxTreeList("instance");
                            dataGrid.option("keyboardNavigation.enterKeyAction", data.value);
                        }
                    </text>)
                )
                <div class="select" id="enterKeyAction"></div>
            </div>
            <div class="option">
                <span class="option-caption">Enter Key Direction</span>
                @{
                    var enterKeyDirectionDataSource = new[] { "none", "column", "row" };
                }

                @(Html.DevExtreme().SelectBox()
                    .ID("enterKeyDirection")
                    .DataSource(enterKeyDirectionDataSource)
                    .InputAttr("aria-label", "Key Direction")
                    .Value(enterKeyDirectionDataSource[1])
                    .OnValueChanged(@<text>
                        function(data) {
                            var dataGrid = $("#treeListContainer").dxTreeList("instance");
                            dataGrid.option("keyboardNavigation.enterKeyDirection", data.value);
                        }
                    </text>)
                )
                <div class="select" id="enterKeyDirection"></div>
            </div>
        </div>
    </div>
</div>
using System.Web.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;

namespace DevExtreme.MVC.Demos.Controllers {
    public class TreeListController : Controller {

        public ActionResult CustomizeKeyboardNavigation() {
            return View();
        }

    }
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
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 {

    public class TreeListEmployeesController : ApiController {

        InMemoryEmployeesDataContext db = new InMemoryEmployeesDataContext();

        [HttpGet]
        public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) {
            return Request.CreateResponse(DataSourceLoader.Load(db.Employees, loadOptions));
        }

        [HttpPost]
        public HttpResponseMessage Post(FormDataCollection form) {
            var values = form.Get("values");

            var newEmployee = new Employee();
            JsonConvert.PopulateObject(values, newEmployee);

            Validate(newEmployee);
            if(!ModelState.IsValid)
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage());

            db.Employees.Add(newEmployee);
            db.SaveChanges();

            return Request.CreateResponse(HttpStatusCode.Created, newEmployee);
        }

        [HttpPut]
        public HttpResponseMessage Put(FormDataCollection form) {
            var key = Convert.ToInt32(form.Get("key"));
            var values = form.Get("values");
            var employee = db.Employees.First(e => e.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, employee);
        }

        [HttpDelete]
        public void Delete(FormDataCollection form) {
            var key = Convert.ToInt32(form.Get("key"));
            var employee = db.Employees.First(e => e.ID == key);

            db.Employees.Remove(employee);
            db.SaveChanges();
        }
    }
}
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 System;
using System.Collections.Generic;

namespace DevExtreme.MVC.Demos.Models.TreeList {
    public class InMemoryEmployeesDataContext : InMemoryDataContext<Employee> {
        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.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: 640px;
}  

.options {
    margin-top: 20px;
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    position: relative;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option-container {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
}

.option {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.option-caption {
    white-space: nowrap;
    margin: 0 8px;
}

.option.check-box {
    width: 150px;
}

.option > .dx-selectbox {
    width: 155px;
}