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!
-
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
-
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.
-
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.
-
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.
-
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.
-
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
-
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.
-
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
-
Toolbar Template
Further customization of the Telerik UI for ASP.NET MVC TreeList is available through the Toolbar template. It gives you full control over the toolbar appearance, enabling you to specify your own layout with ease.
See Telerik UI for ASP.NET MVC TreeList toolbar template demo
-
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.
-
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.
-
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.
-
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
-
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.
-
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
-
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
-
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.
-
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.
-
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.
