JavaScript TreeGrid - Syncfusion JavaScript UI Controls

The HTML5 JavaScript TreeGrid is a feature-rich control used to visualize both self-referencial and hierarchical data effortlessly in a tree like tabular format. It offers many rich features such as data binding, editing, sorting, filtering, paging, aggregating rows, and exporting to Excel, CSV, and PDF formats.

Features and Benefits

Data binding

Seamlessly bind data from multiple data sources in the form of JavaScript object array collection. Data binding uses the data manager to handle data, and supports customizing data requests and processing.

Filtering

Helps view subset of records from a data source that meets the given filtering criteria. Different filter modes are available in TreeGrid to apply filter criteria to parent, child, none, or both parent and child rows. TreeGrid supports filter bar and menu filter types. The filter menu provides an interactive UI, and the appropriate filter type can be chosen based on the application. Options to customize filter operators, case sensitivity, and diacritics are also available.

Sorting

TreeGrid allows users to sort a column by simply clicking the header. It allows sorting data in the ascending, descending, or custom sort order. You can also sort more than one column using a simple user interaction and API.

Paging

Through paging, a segment of data can be viewed from the assigned data source. The HTML5 JavaScript TreeGrid offers built-in pager UI with options to customize its entire UI. It also has an on-demand paging mode for effective data retrieval from remote web services.

Editing

The HTML5 JavaScript TreeGrid provides support to add, edit, update, and delete rows. It performs editing operations with JSON collection or remote data service with the help of data manager. TreeGrid supports edit modes such as row, dialog, and cell editing. These provide an interactive UI to add and edit rows.

Aggregation

Easily visualize aggregates for the desired columns in TreeGrid using dedicated summary row elements. Summary rows can be customized to show in each child tree and/or at the end of the TreeGrid. It also offers multiple customization options such as built-in aggregate types, user-defined aggregation, templates, and value formatting.