Overview

The Essential Studio for JavaScript TreeGrid is a feature-rich control used to visualize self-referential hierarchical data effectively in a tabular format. It can pull data from data sources such as an array of JSON, RESTful services, OData services, WCF services or DataManager, and binding data fields to columns. It also expands or collapses child data using the tree column.

The most important features available in the TreeGrid component are paging, sorting, filtering, searching.

Key features

• Data sources: Binds the TreeGrid component with an array of JavaScript objects or DataManager.
• Sorting: Supports n levels of sorting.
• Filtering: Supports filtering records with filter bar and menu filtering modes.
• Paging: Allows easy switching between pages using the pager bar.
• Editing: Offers cell and row editing modes for updating the records.

• Columns: The column definitions are used as the datasource schema in the TreeGrid. This plays a vital role in rendering column values in the required tree structure.

  • Reordering: Allows dragging and dropping of any column anywhere in the treegrid’s column header row, thus allowing repositioning of columns.
  • Resizing: Resizing allows changing column width on the fly by simply dragging the right corner of the column header.
  • Cell Styling: TreeGrid cell styles can be customized either by using CSS or programmatically.
• Selection: Rows or cells can be selected in the treegrid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.
• Templates: Templates can be used to create custom user experiences in the treegrid.
• Aggregation: Provides the option to easily visualize the aggregates for column values. Displays aggregates for child data.
• Context menu: The context menu provides a list of actions to be performed in the treegrid. It appears when a cell, header, or the pager is right-clicked.
• Export: Provides the options to export the treegrid data to Excel, PDF, and CSV formats.
• RTL support: Provides right-to-left mode that aligns the treegrid content from right to left.
• Localization: Provides an inherent support to localize the UI.