Log In
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Pivot Grid
  [Collapse]Tree List
    Overview - TreeList
    Main Features
     Binding to Data
   [Expand]Visual Elements
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Binding to Data

The DevExpress ASP.NET MVC TreeList extension supports binding to an object that supports the IEnumerable or IQueryable interface. Since TreeList is designed to display information in a tree structure, its data source should meet certain requirements. If a data source contains flat data, two additional fields are necessary to build a tree structure:

Columns bound to these fields are called service columns.


When TreeList is bound to a hierarchical data source (e.g. XmlDataSource), the TreeListSettings.KeyFieldName and TreeListSettings.ParentFieldName properties are not in effect.

The following steps describe how to add the TreeList extension to your project and bind it to data.

Expanded Step 1. Create a Data Model

Create a new data model. You can use any model that supports the IEnumerable or IQueryable interface. For example, you can create a new model using the Entity Framework Code First or Entity Framework Database First development approach.

Expanded Step 2. Add a TreeList to the View

The TreeList updates its content via callbacks. Since ASP.NET MVC does not support callbacks, you will need to place the TreeList in the Partial View and define how the callbacks will be routed back to your controller using the TreeListSettings.CallbackRouteValues property.

View code:

Partial View code ("DataBindingPartial.cshtml"):

Expanded Step 3. Edit the Controller Code

Within the controller code, you will need to define the action method that will handle the TreeList's callbacks. The "DataBindingPartial" action method below handles the callbacks. The DepartmentsModel.GetData method gets the data from the data source to pass to the View.

Controller code:

The image below shows the result.

Expanded See Also

Getting Started Video: DevExpress ASP.NET MVC - TreeList
Is this topic helpful?​​​​​​​