Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[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
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Collapse]Navigation and Layout Extensions
   [Expand]FormLayout
   [Expand]Menu
   [Expand]NavBar
   [Expand]Ribbon
   [Expand]PageControl
   [Expand]TabControl
   [Expand]PopupMenu
   [Expand]Splitter
   [Collapse]TreeView
     Overview - TreeView
    [Collapse]Concepts
      Node
     [Expand]Binding to Data
      Expanding and Collapsing Nodes
      Animation Effect
      Selection
      Node Link Mode
      Check Box Support
      Callbacks
      Templates
    [Expand]Visual Elements
   [Expand]Panel
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Templates

The TreeView supports template technology, allowing you to completely customize the element's appearance and layout. The look of the TreeView default elements can be completely modified by creating a specific template, defining how an element will be rendered by a client browser.

The TreeView allows you to create templates for two element types: the node text content and the entire node content. You can apply templates for all identical elements within the TreeView (using extension level templates) or for a particular element (using node level templates).

The table below lists the members used to create templates.

Entire node content templates Node text content templates
Extension level templates TreeViewSettings.SetNodeTemplateContent TreeViewSettings.SetNodeTextTemplateContent
Node level templates MVCxTreeViewNode.SetTemplateContent MVCxTreeViewNode.SetTextTemplateContent

Note that templates created at the node level override extension level templates.

 

Expanded Example: Creating Templates (ASPX)

This example demonstrates how a template can be defined in a view. The result is shown by the first image in this topic (see it above).

View code (ASPX):

Expanded Example: Creating Templates (Razor)

This example demonstrates how a template can be defined in a view. The result is shown by the first image in this topic (see it above).

View code (Razor)

How would you rate this topic?​​​​​​​