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!

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.