jQuery Tree Grid

Javascript/jQuery UI Widgets

Show Demo List

Introduction

jqxTreeGrid is a lightweight jQuery widget which represents data in a tree-like structure. The Tree Grid(popular also as Tree List) widget supports multi column display of hierarchical data, data paging, sorting and filtering, data editing, columns resizing, fixed columns, conditional formatting, aggregates and rows selection. It can read and display the data from your data sources like XML, JSON, Array, CSV or TSV. jqxTreeGrid has intuitive and easy to use APIs and works across devices and browsers. Try jqxTreeGrid in our jsEditor - cloud solution for JavaScript, HTML and CSS editing, hosting and sharing your web development ideas!

Andrew	Fuller	Vice President, Sales	2/19/1952	8/14/1992	908 W. Capital Way	Tacoma
Laura	Callahan	Inside Sales Coordinator	1/9/1958	3/5/1994	4726 - 11th Ave. N.E.	Seattle
Nancy	Davolio	Sales Representative	12/8/1968	5/1/1992	507 - 20th Ave. E.Apt. 2A	Seattle
Janet	Leverling	Sales Representative	8/30/1963	4/1/1992	722 Moss Bay Blvd.	Kirkland
Margaret	Peacock	Sales Representative	9/19/1967	5/3/1993	4110 Old Redmond Rd.	Redmond
Steven	Buchanan	Sales Manager	3/4/1955	10/17/1993	14 Garrett Hill	London
Michael	Suyama	Sales Representative	7/2/1963	10/17/1993	Coventry House Miner Rd.	London
Robert	King	Sales Representative	5/29/1960	1/2/1994	Edgeham Hollow Winchester Way	London
Anne	Dodsworth	Sales Representative	1/27/1966	11/15/1994	7 Houndstooth Rd.	London
Fumi	Jinushi	Sales Manager	2/3/1954	11/15/1994	14 Garrett Hill	London
Chris	Ferguson	Sales Representative	9/19/1967	5/3/2009	4115 Old Redmond Rd.	Redmond
Antoni	Brooke	Sales Representative	9/19/1985	5/3/2010	4210 Old Redmond Rd.	Redmond

Features

Data Binding
Data Export
Virtual Mode(Load on Demand)
Sorting
Filtering
Paging
Row Editing and Validation
Row Details
Localization
Columns Resizing
Columns Hierarchy
Pinned Columns
Cells Formatting
Custom Cells Rendering
Aggregates and Sub Aggregates
Keyboard Navigation
Right to Left
WAI ARIA

Data Binding

jqxTreeGrid has a built-in data binding logic designed to support various data sources and operate with large data sets in Paging mode. The tree grid supports several data binding modes optimized for common scenarios:

Local Data - load the tree grid from a local array of objects.
Xml Data - load the tree grid from XML data source using AJAX.
JSON Data - load the tree grid from JSON data source using AJAX.
CSV Data - load the tree grid from CSV.
Tab Data - load tree grid from Tab-Delimited (TSV).
Remote Data - load the tree grid using JSONP. JSONP (JSON with Padding) represents JSON data wrapped in a function call. JSONP is an effective cross-domain communication technique frequently used to bypass the same-origin policy limitations.

Load on Demand

In addition to the data bound mode, the jQWidgets Tree Grid (jqxTreeGrid) can operate in Virtual Mode which is useful when binding to large data sets. In virtual mode, a tree is created on demand. In this case, child records are created and initialized when the parent record is expanded.

Sorting

Our Tree Grid plug-in provides powerful sorting capabilities like one-click automatic sorting and sorting through API calls. The tree grid automatically chooses the most appropriate sort comparison.

Paging

The integrated paging functionality lets the users to use the tree grid with large data sets separated in multiple pages for faster loading and easy navigation.

Filtering

jqxTreeGrid includes an advanced and extensible filtering functionality that allows you to filter by any column for the most common data types. Easy to use APIs allow you to build your own filters and filtering expressions for any data type.

Pinned Columns

jqxTreeGrid supports Excel-like pinned (frozen) columns. The pinned columns are very useful when working with large tables and it makes it easy to scroll and compare data from different parts of the table.

Cells Formatting

Our jQuery Tree Grid offers a cell formatting feature where you can easily specify a formatting string for data column. You can format dates, numeric values like decimal numbers, integer and floating-point numbers, currency and percentage values.

Custom Cells Rendering

The Tree Grid programming model is very flexible and extensible. Developers can create custom cell rendering functions and apply them to columns or individual Tree Grid cells. This feature technically enables rendering of any HTML content in the Tree Grid cells.

Localization

The jQWidgets Tree Grid plug-in supports localization for multi-language web sites and applications. All text elements used in the widget can be localized.

Styling and Customization

jqxTreeGrid ships with multiple professionally designed themes. Each theme is stored in a separate CSS file and is easy to change. The themes can be switched using a single property of the Tree Grid widget.

Web UI Widgets

Integration & Tools