background

UI for ASP.NET MVC

ASP.NET MVC TreeList

  • Visualize hierarchical data with the powerful ASP.NET MVC TreeList component and benefit from deep nesting capabilities, support for paging, sorting, filtering, flexible data binding, selection, templates, and more.
  • Part of the Telerik UI for ASP.NET MVC library along with 110+ professionally designed UI components.
  • Includes support, documentation, demos, virtual classrooms and more!
Telerik UI for ASP.NET MVC Suite
  • Overview

    The ASP.NET MVC TreeList is a data management component with similar functionalities to the Grid component. In addition to the built-in paging, sorting, filtering, data editing and various export options, the TreeList provides the option to display self-referencing data in a user-friendly manner by combining the features of a Grid and a TreeView. The component is suitable for a wide range of use case scenarios, for example displaying and managing organizational structures and grouping employees under their managers. 

    See the Telerik UI for ASP.NET MVC TreeList in action

    Telerik UI for ASP.NET MVC TreeList Overview
  • Data Binding

    Use the DataSource component to bind the TreeList control to static arrays, dynamic objects, local or remote data or even SignalR hubs. The built-in AJAX binding is especially useful in ASP.NET MVC scenarios. 

    Telerik UI for ASP.NET Core Data Binding
  • Scrolling

    The TreeList comes with built-in scrolling functionality enabled by default. However, to guarantee the rendering of scrollbars, you should either define the height of the component for vertical scrolling or define the width of all columns for horizontal scrolling.  


  • Filtering

    If you prefer not to use a Column menu, you can enable a filter row in the header of the ASP.NET MVC TreeList by setting its filterable property to row. Based on the column data type, the filter row displays the appropriate filter types for string, numeric or date inputs and the list of available filter operands, such as “starts with,” “contains,” “is equal to,” etc.  

    Telerik UI for ASP.NET Core TreeList Filter Row
  • Editing

    The data in the TreeList can be edited in several different ways: 
    • Inline editing allows you to modify the content of any cell from the selected row.
    • InCell editing puts the highlighted cell in edit mode.
    • PopUp editing displays a popup form with all values of the current entry and lets you edit them.
    Telerik UI for ASP.NET MVC TreeList - Edit
  • Columns

    The TreeList component features three column options. The first two, reorder and resize, allow users to structure their data and order items based on their personal preferences. The third option allows the freezing of panes to keep important information in sight at all times. 

    Explore the ASP.NET MVC TreeList Column Reordering, Resizing and Freeze Panes options
  • Multi-Column Headers

    The Multi-Column Headers are brought into play when users aim to showcase multi-level headers of a TreeList as part of a particular category or group. This gives you the option to define a column that spans over several sub-columns. 

    003-treelist-multi-column-headers
  • Column Menu

    The Telerik UI for ASP.NET MVC TreeList features a Column menu that allows users to organize common data commands, such as sort data (in ascending or descending order), hide and unhide columns and apply multiple filters on the data within each column.  

    Check out the Telerik UI for ASP.NET MVC TreeList Column Menu
    Telerik UI for ASP.NET MVC TreeList - Column Menu
  • Rows Selection

    The TreeList supports two types of row selections: 

    • Row selection can be easily enabled by setting the Selectable property to true.
    • Row CheckBox selection can be configured with a definition for selectable columns in the TreeList, which automatically adds a checkbox column as the first column. Furthermore, you can define whether the selection of a row includes all its descendants or not.
    Telerik UI for ASP.NET Core TreeList Checkbox Selection
  • Drag and Drop

    Users can easily reorder TreeList rows by dragging and dropping them to the desired level of the hierarchical tree (same level, parent level or child level). When this operation is executed, the TreeList will automatically update the parentId field for the item.  

    Play around with the ASP.NET MVC TreeList Drag & Drop feature in this demo

    Telerik UI for ASP.NET MVC TreeList Drag & Drop
  • Row Template

    The TreeList row template offers flexible customization options for styling the rows’ appearance. You can render anything from plain text to images, icons, link buttons and formatted multi-line descriptions. 

    Telerik UI for ASP.NET MVC TreeList Row Template
  • Search Panel

    When dealing with a large dataset, users need an easy way to find the information they need. The Search Box built into the TreeList table header enables users to filter the data and locate only the relevant records. 
    Telerik UI for ASP.NET MVC TreeList - Search
  • Client-Side Paging

    This feature is intended to help with large data sets within the TreeList. It is currently specifically for the client-side, which means that all of the data has been loaded on the client, but this new feature should help tremendously in the way of performance.

    treelist-paging
  • Aggregates

    Telerik TreeList extension for ASP.NET MVC enables you to display aggregates in the column footer cells, such as sum, count, average, etc.

    Telerik UI for ASP.NET MVC TreeList Aggregates demo

    Telerik UI for ASP.NET MVC TreeList - Aggregates
  • TreeList Persist State

    The TreeList state management gives you the ability to save users’ preferences and settings and restore them later on when needed. This can be achieved using the exposed getOptions and setOptions methods. 

    Learn more about the ASP.NET MVC TreeList State Persistence in this demo
  • Events

    The ASP.NET MVC TreeList fires different events, depending on how the user has interacted with the component. Some events are related to data management, such as OnEdit, OnUpdate and OnDelete, and some to visibility like OnExapnd and OnCollapse. The full list of events supported in the TreeList component is available in the API
    Telerik UI for ASP.NET Core Events
  • Export to Excel and PDF

    Export the full content of the TreeList control to PDF and Excel files. You can enable users to customize the exported file to include exactly the content they need. 

    Learn how to export multiple TreeLists to Excel in our documentation

    Telerik UI for ASP.NET MVC TreeList - Export
  • Globalization and Localization

    The ASP.NET MVC TreeList supports globalization and localization as features and is designed to respond to different cultures’ requirements for number, date and time formatting, currency, week and month names.  

    See more on TreeList Localization
    Telerik UI for ASP.NET MVC Globalization Localization
  • Accessibility

    The Telerik TreeList is perfect for scenarios where accessibility is important for your application. The control complies with Section 508 and WCAG 2.1 guidelines, ensuring that individuals with disabilities can still view and interact with it.

    Telerik UI for ASP.NET MVC Accessibility
  • Keyboard Navigation

    The ASP.NET MVC TreeList supports keyboard navigation, meaning users can use their keyboards to navigate the component and perform actions both in the component’s header and the data table itself. 

    Telerik UI for ASP.NET Core Keyboard navigation
  • TreeList Theming

    You can style the TreeList with the help of multiple built-in themes and swatches the component comes with. Explore the Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which resembles the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI) themes and choose the swatch that best suits your application. 

    You can easily customize the available themes with a few lines of CSS or create a new one with the Progress SASS ThemeBuilder application to meet your client’s design requirements. 

All ASP.NET MVC Components

Next Steps