Syncfusion AI Assistant

How can I help you?

Overview of Tree Grid in Angular

10 Jun 20262 minutes to read

The Essential Studio® for Angular Tree Grid is a feature-rich component used to visualize self-referential hierarchical data efficiently in a tabular format. The Tree Grid 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 Tree Grid component include paging, sorting, filtering, and searching, among others.

Key Features

  • Data Sources: Binds Tree Grid to an array of JavaScript objects or to a DataManager instance for versatile data handling.
  • Adaptive Layout: The Tree Grid 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 Tree Grid.
  • Virtual Scrolling: Efficiently manages and displays large volumes of data without performance degradation.
  • Columns: Column definitions act as a schema for the Tree Grid’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 Tree Grid 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 Tree Grid.
  • 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 Tree Grid data to Excel, PDF, and CSV formats.
  • RTL Support: Includes right-to-left layout mode, aligning Tree Grid content appropriately for RTL languages.
  • Localization: Provides built-in support for localizing the user interface.