Overview of TreeGrid in Angular

12 Sep 20251 minute to read

The Essential Studio® for Angular TreeGrid is a feature-rich component used to visualize self-referential hierarchical data efficiently in a tabular format. The TreeGrid can bind data from various sources such as an array of JSON objects, RESTful services, OData services, WCF services, or DataManager, allowing flexible data integration by mapping data fields to columns. It enables expanding or collapsing hierarchical data through the tree column for an interactive experience.

Key features of the TreeGrid component include paging, sorting, filtering, and searching, among others.

Key Features

  • Data Sources: Binds TreeGrid to an array of JavaScript objects or to a DataManager instance for versatile data handling.
  • Adaptive Layout: The TreeGrid user interface offers an optimal viewing experience and improved usability on small screens.
  • Sorting: Supports sorting at multiple levels, enabling hierarchical data organization.
  • Filtering: Provides both filter bar and menu modes to filter records.
  • Paging: Facilitates easy navigation between pages using the pager bar.
  • Editing: Supports cell and row editing modes for updating records directly within the TreeGrid.
  • Virtual Scrolling: Efficiently manages and displays large volumes of data without performance degradation.
  • Columns: Column definitions act as a schema for the TreeGrid’s data source, controlling the presentation of data in a tree structure.
  • Reordering: Permits dragging and dropping columns within the header row for dynamic column arrangement.
  • Resizing: Enables changing column width interactively by dragging the edge of a column header.
  • Cell Styling: Customize TreeGrid cell styles using CSS or programmatically for a tailored appearance.
  • Selection: Allows row or cell selection with support for multi-selection using keyboard modifiers or programmatic control.
  • Templates: Enable custom user experiences by allowing templates for different parts of the TreeGrid.
  • Aggregation: Provides aggregation options for column values, including display of aggregates for hierarchical (child) data.
  • Context Menu: Offers a context menu with actionable options, accessible via right-click on a cell, header, or pager area.
  • Export: Supports exporting TreeGrid data to Excel, PDF, and CSV formats.
  • RTL Support: Includes right-to-left layout mode, aligning TreeGrid content appropriately for RTL languages.
  • Localization: Provides built-in support for localizing the user interface.