Data Shaping & Presentation
When bound to data, the DevExpress ASP.NET TreeList can present any self-referenced data structure. In Unbound mode, it allows you to manually create and populate the tree as business needs dictate.
Tree Nodes
Use it as a drop-in replacement for the standard treeview.
Tree Nodes
Our ASP.NET TreeList is a drop-in replacement for the standard Microsoft ASP.NET TreeView. Nodes within the ASP.NET TreeList represent hierarchical data structures. Unlike a treeview, however, the TreeList can also display columns for each Node.
Columns
Use it as a hybrid UI element - a tree and listview in one.
Columns
Data columns represent individual data source fields. They include a clickable Column Header and associated Data Cell. An optional Command columns allows end-users to activate data edit mode, update data, add and delete nodes, etc.
Sorting
Sort against an unlimited number of TreeList columns.
Sorting
You can sort data against an unlimited number of columns. When necessary, you can disable runtime sort options and handle all sort operations in code. Sort order is automatically indicated within the appropriate column using a glyph.
Summaries & Aggregates
Compute summaries with 5 pre-defined aggregate functions.
Summaries & Aggregates
The DevExpress ASP.NET TreeList allows you to compute Summaries for all cell values within a column or across a group of tree nodes. These Summaries (you can compute summaries for any number of columns) can be displayed within the TreeList's Footer or Group Footer cells. Five predefined aggregate functions (COUNT, MAX, MIN, SUM and AVERAGE) are available.
Conditional Formatting
Apply custom styles to differentiate key data points.
Conditional Formatting
Our Tree List control provides custom style settings so you can paint individual data cells or entire nodes. In this animation, the TreeList's HtmlRowPrepared event is used to color rows green (if Location = Monterey) and the HtmlDataCellPrepared event handler is used to color Budget cells yellow (color brightness is based on a cell's value and those over one million use a bold font effect).
Alternating Node Style
Use alternating row styles to improve readability.
Alternating Node Style
To improve readability, you can apply a Style against alternating (even) nodes within the ASP.NET TreeList. In this animation, we've set the Styles.AlternatingNode.Enabled property to true. To override the default style and provide your own Style settings, use the Styles.AlternatingNode property.
"The DevExpress ASP.NET Suite is the perfect set of controls to help DataClara create the professional, high perfomance, and flexible solutions that our clients need."Eric McGrail
Data Editing
The TreeList control includes multiple data editing options - be it inline within the control or via customizable popups.
Inline Cell Editing
Edit data directly within TreeList cells.
Inline Cell Editing
Use our Inline Cell Editing mode to modify cell values directly within TreeList's cells.
Inline Edit Forms
Use a custom inline edit form to modify node/column values.
Inline Edit Forms
If you do not want to enable data editing within TreeList cells, you can activate the control's Inline Edit form instead. By using Templates, you can create a customized layout for the Inline Edit Form as needs dictate. In this animation, we've used our ASP.NET Page Control to help reduce space occupied by the Edit Form.
Popup Edit Forms
Use a custom popup edit form to modify node/column values.
Popup Edit Forms
Cell values can be edited within the Popup Edit Form. By default, the Popup Edit Form is displayed near the edited tree node. The Popup Edit Form can be dragged and its default position can be customized via the SettingsPopupEditForm property.
Data Editors
Edit TreeList values with one of over a dozen data editors.
Data Editors
Data editors that ship inside our ASP.NET Data Editors Library are fully supported. Features include advanced masked input, display value formatting, a built-in data validation engine and rich client-side functionality.
Templates
Customize the appearance and behavior of the TreeList.
Templates
Built-in templates allow you to create custom layouts for column headers, data and footer cells, etc.
Data Validation & Error Indication
Reduce data entry errors and visually inform users of invalid input.
Data Validation & Error Indication
You can manually Validate edited nodes and display errors for invalid field values. In this animation, Validation is implemented within the NodeValidating event handler. Invalid values are indicated via error icons. Hovering the mouse over an icon displays a hint along with an error description.
"Working with devexpress for more than 3 years now, and still I discover new excellent possibilities on a daily basis! Way to go guys, your developer suite rocks!"Andy Luyten
UI Customization & TreeList Behaviors
A variety of customizable UI elements and behaviors give you meticulous control over the TreeList's runtime capabilities.
Column Customization
Put control over column display in the hand of your end-users.
Column Customization
Much like Microsoft Outlook's Column Chooser, the TreeList's Customization Window displays all hidden column headers (those that you specify at design time or those an end-user has selected to remove from a webpage). Use it to hide columns or to make columns visible at runtime via intuitive drag & drop operations. The TreeList's SettingsCustomizationWindow property allows you to specify the Customization Window's availability, caption, position, etc.
Node Preview
Use memo fields to display extended tree node information.
Node Preview
Node Preview allows each tree node to display a preview pane. Preview panes are fantastic ways to display large memo fields or custom data across all TreeList columns. To enable the Preview, simply set the Settings.ShowPreview property to true.
Column Resizing & Tree Lines
Improve readability and resize column width on the fly.
Column Resizing & Tree Lines
End-users can resize TreeList column width by dragging the appropriate column header border. Options include the ability to change the width of the control when header width is modified or to reduce the width of the column immediately to the right. The TreeList also provides multiple options to control the visibility of its tree and grid lines as well as the control's border.
Data Paging
Navigate tree nodes with an intuitive data pager.
Data Paging
As you might expect, TreeList content can be split across multiple pages whenever the control's built-in Data Pager is enabled. You can control the position of the pager, along with the visibility of the page size combobox and associated navigation buttons.
Scrolling
Allow users to scroll both vertically and horizontally.
Scrolling
For utmost UI flexibility and when you do not want to use a pager to navigate the contents of the TreeList, you can enable both a vertical and horizontal scrollbar.
Node Selection
Enable multiple node selection via checkboxes.
Node Selection
Use the TreeList's Focused Node feature to highlight records within the control. Enable node selection by using check boxes and optionally enable recursive selection to allow end-users to modify the selected state of child nodes using a single click on a parent node.
Themes
Control the appearance of the TreeList via built-in app themes.
Themes
In addition to a number of built-in themes, you can use style properties and CSS for appearance customization. Templates that are available for most control elements enable you to easily adjust and enhance a control layout.
Drag & Drop
Enable intuitive drag & drop operations within and outside the TreeList.
Drag & Drop
You can allow end-users to move tree nodes via drag and drop either within the TreeList itself or between the TreeList and external controls.