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.

Templates

Using templates, users can create custom user experiences in the TreeGrid. It provides various template options to create custom headers, custom cell contents, and toolbars.

Selection

Selection provides an interactive support to highlight the desired rows or cells. Single or multiple row/cell selection can be done using simple mouse down or keyboard interaction.

Responsive and touch-friendly

All TreeGrid features work on touch devices with zero configuration. Without customization, the TreeGrid control allows enabling features such as sorting, paging, and selection. Responsive feature allows the TreeGrid layout to be viewed on various devices. It is also possible to hide specific columns for particular screen sizes using column-based media query support.

Stacked headers

Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be stacked. The data columns can still be sorted and filtered.

Column chooser, resize, reorder, and foreign key column

Column defines the schema of data source in a TreeGrid. Column acts as the base for all features. It supports formatting, auto generation of columns, column definitions, and resize, reorder, column chooser, column menu, and other important features.

Web framework integration

The TreeGrid control integrates easily with any web framework:

• Check our ASP.NET Core TreeGrid
• Check our Angular TreeGrid
• Check our React TreeGrid
• Check our Vue TreeGrid

Related Links

Download Free Trial
Pricing
Documentation
View Demos
Community Forums

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 20,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1000+ controls and frameworks for web (ASP.NET Core, ASP.NET MVC, ASP.NET Web Forms, JavaScript, Angular, React or Vue), mobile (Xamarin, UWP and JavaScript), and desktop development (Windows Forms, WPF & UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

sales@syncfusion.com | www.syncfusion.com | Toll Free: 1-888-9 DOTNET