# ASP.NET MVC TreeList Overview The Telerik UI TreeList HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI TreeList widget. The TreeList enables the display of self-referencing tabular data and allows sorting, filtering, and data editing. * [Demo page for the TreeList HtmlHelper](https://demos.telerik.com/aspnet-mvc/treelist/index) ## Initializing the TreeList The following example demonstrates how to define the TreeList. > The TreeList distinguishes the root items based on the `ParentId` field. If the `ParentId` is set as `.Nullable(true)`, root items with be items whose `ParentId` field values are `null`. If the `ParentId` is not nullable (`.Nullable(false)`), root items will be items which have a default value for their data type. 1. Create a new ASP.NET MVC application. If you have installed the [Telerik UI for ASP.NET MVC Visual Studio Extensions](https://www.telerik.com/aspnet-mvc/documentation/vs-integration/new-project-wizard), create a Telerik UI for ASP.NET MVC application. Name the application `KendoGridServerBinding`. If you decided not to use the Telerik UI for ASP.NET MVC Visual Studio Extensions, follow the steps from the [introductory article](https://www.telerik.com/aspnet-mvc/documentation/getting-started-mvc/first-steps) to add Telerik UI for ASP.NET MVC to the application. 2. Add a new `Entity Framework Data Model`. Right-click the `~/Models` folder in the solution explorer and pick **Add new item**. Choose **Data** > **ADO.NET Entity Data Model** in the **Add New Item** dialog. Name the model `Northwind.edmx` and click **Next**. This starts the **Entity Data Model Wizard**. ![UI for ASP.NET MVC A new entity data model](https://www.telerik.com/aspnet-mvc/documentation/assets/2bcb736a2f6921fc8475ef2ecce5c4de/treelist-new-entity-data-model.png) 3. Pick the **Generate from database** option and click **Next**. Configure a connection to the Northwind database. Click **Next**. ![UI for ASP.NET MVC Choosing the connection](https://www.telerik.com/aspnet-mvc/documentation/assets/7124ed17af3af1be9957f54bd7ccb38c/treelist-entity-data-model.png) 4. Choose the **Employees** table from the `Which database objects do you want to include in your model?`. Leave all other options as they are set by default. Click **Finish**. ![UI for ASP.NET MVC Choosing the Employees table in the database objects](https://www.telerik.com/aspnet-mvc/documentation/assets/6177773f0af8308af9cf9a79fd84c811/treelist-database-objects.png) 5. Right-click the `~/Models` folder in the solution explorer and add a new `EmployeeViewModel` class. ```Razor HtmlHelper @(Html.Kendo().TreeList() .Name("treelist") .Columns(columns => { columns.Add().Field(f => f.FirstName).Width(250).Title("First Name"); columns.Add().Field(e => e.LastName).Title("Last Name"); columns.Add().Field(e => e.Position); columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}"); }) .DataSource(dataSource => dataSource .Read(read => read.Action("Index", "EmployeeDirectory")) .Model(m => { m.Id(f => f.EmployeeId); m.ParentId(f => f.ReportsTo).Nullable(true); m.Field(f => f.FirstName); m.Field(f => f.LastName); m.Field(f => f.ReportsTo); }) ) ) ``` ```C# Model public class EmployeeViewModel { // The Id. public int EmployeeId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } // A nullable ParentId. public int? ReportsTo { get; set; } public string Address { get; set; } // This is a case-sensitive property. Define it only if you want to use lazy-loading. // If it is not defined, the TreeList will calculate and assign its value on the client. public bool hasChildren { get; set; } } ``` ```C# Controller public JsonResult All([DataSourceRequest] DataSourceRequest request) { var result = GetDirectory().ToTreeDataSourceResult(request, e => e.EmployeeId, e => e.ReportsTo, e => e ); return Json(result, JsonRequestBehavior.AllowGet); } ``` ```C# AsyncController public async Task TreeList_Read([DataSourceRequest] DataSourceRequest request) { var northwind = new NorthwindEntities(); var result = await northwind.Employees.ToTreeDataSourceResultAsync(request, employee => employee.EmployeeId, employee => employee.ReportsTo, employee => employee ); return Json(result, JsonRequestBehavior.AllowGet); } ``` 1. Build and run the application. ![UI for ASP.NET MVC The final result is a TreeList bound to data](https://www.telerik.com/aspnet-mvc/documentation/assets/d64341ef78a4d9afeeec5b73479e34b1/treelist-bound.png) ## Functionality and Features | Feature | Description | | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Ajax binding](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/ajax-binding) | You can bind the TreeList to remote data. | | [Editing](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/editing/overview) | The TreeList supports various editing modes that allow you to control the way the data is represented. | | [Paging](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/client-side-paging) | Use the built-in paging functionality to paginate the data. | | [Grouping with aggregates](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/aggregates) | The TreeList allows you to display built-in aggregate calculations, when the supplied data is grouped. | | [Excel](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/export/excel-export) | The control enables you to export its content to Excel. | | [PDF](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/export/pdf-export) | You can export the content of the TreeList to PDF with this built-in functionality. | | [Column enhancements](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/columns/locked-columns) | The TreeList allows you to set locked (frozen) columns, which remain visible while you scroll the TreeList horizontally. | | [Scrolling](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/scrolling) | You can independently control vertical and horizontal scrolling in the component. | | [Row Selection](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/selection) | The TreeList supports different modes of row selection. | | [Localization](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/globalization/overview) | The control provides [localization](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/globalization/localization) of its messages. | | [Accessibility](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/accessibility/overview) | The TreeList is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/accessibility/keyboard-navigation) for faster navigation. | ## Next Steps * [Getting Started with the TreeList](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/treelist/getting-started) * [Basic Usage of the TreeList HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/treelist/index) ## See Also * [Using the API of the TreeList for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/treelist/api) * [Knowledge Base Section](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base)