[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Collapse]Tree List
   [Expand]Product Information
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Data Editing
    [Expand]Data Shaping and Manipulation
     Drag and Drop
    [Expand]Focus and Navigation
     Appearance Customization
     Save and Restore Client Layout
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC 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]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)


The ASPxTreeList allows you to use any HTML or server-side control as a template for an element inside the tree list to customize that element's appearance and layout.

Expanded Tree List Elements that Support Templates

Element Template Property
Data Cell TreeListTemplates.DataCell
Footer Cell TreeListTemplates.FooterCell
Group Footer Cell TreeListTemplates.GroupFooterCell
Column Header Caption TreeListTemplates.HeaderCaption
Preview TreeListTemplates.Preview

Use the following templates to provide a custom layout for column elements (headers, cells).

Element Template Property
Data Cell TreeListDataColumn.DataCellTemplate
Column Header Caption TreeListColumn.HeaderCaptionTemplate
Footer Cell TreeListColumn.FooterCellTemplate
Group Footer Cell TreeListColumn.GroupFooterCellTemplate

Expanded Create a Template

Use the ASPxTreeList.Templates property to access tree list element (data cell, node, filter row, etc.) templates.



Expanded Access Controls Inside Templates

Use methods from the member table to access controls in templates.


Data Cell Template

This example illustrates how to use the ASPxTreeList.FindDataCellTemplateControl method to find a server control in the ASPxTreeList's data cell template.


Edit Cell Template

In this sample, the ASPxTreeList.FindEditFormTemplateControl method allows you to find a server control in the edit form template.

Expanded Member Table

Member Description
ASPxTreeList.Templates Provides access to the templates used to display ASPxTreeList elements (cells, column headers, etc.).
ASPxTreeList.FindDataCellTemplateControl Searches for the server control contained within the specified data cell's template.
ASPxTreeList.FindEditCellTemplateControl Searches for the specified server control contained within the specified edit cell's template.
ASPxTreeList.FindFooterTemplateControl Searches for the server control contained within the Footer's template.
ASPxTreeList.FindGroupFooterTemplateControl Searches for the server control contained within the specified group's footer template.
ASPxTreeList.FindHeaderCaptionTemplateControl Searches for the specified server control contained within the column header's caption template.
ASPxTreeList.FindPreviewTemplateControl Searches for the specified server control contained within the specified preview's template.

Expanded Task-Based Help

Present Data in Cards

The following example illustrates how to present data in cards:

  • Place a table inside the data cell template to create a card layout.
  • Specify a web control for each data field in a card.
  • Use the Eval() function to get a data field value from a data source.

Expanded Online Demos

Is this topic helpful?​​​​​​​