[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [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
  [Collapse]Tree List
    Overview - TreeList
    Main Features
   [Collapse]Concepts
     Binding to Data
    [Expand]Data Editing
   [Expand]Visual Elements
  [Expand]Card View
  [Expand]Reporting
  [Expand]Charting
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]SpellChecker
  [Expand]Query Builder
 [Expand]Localization
 [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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[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.

Important

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?​​​​​​​