Skip to main content Skip to footer
Vue Icon

TreeGrid for Vue Datagrids

Create a Vue TreeGrid by binding child items within Wijmo’s FlexGrid. Our TreeGrid supports both bound and an unbound mode, lazy loading of data to increase performance, and importing XML data to display.

Overview

A Vue TreeGrid is a powerful control for displaying hierarchical data in a tabular format. It enables users to expand and collapse data within a grid, which allows them to easily navigate complex data sets.

TreeGrid

Part of our Vue datagrid, Wijmo's TreeGrid controls allows you to display hierarchical data by binding child items within your data to the datagrid.

TreeGrid Demo

TreeGrid Documentation

Unbound TreeGrid

By default, Vue TreeGrids are bound to a collection of data. If you prefer to work in unbound mode, the datagrid supports the ability to add rows and columns of data through code, keeping the TreeGrid unbound from a data source.

Unbound TreeGrid Demo

Unbound TreeGrid Documentation

Asynchronous Loading

When you need to load a large amount of data and performance is a concern, Wijmo's Vue TreeGrid allows for the implementation of asynchronous loading (or lazy loading). The datagrid will only load in data as nodes are expanded and cells are rendered, reducing load times when the TreeGrid is being rendered.

Lazy Loading Demo

Lazy Loading Documentation

Binding to XML

By using a DOMParser, the Vue TreeGrid can format an XML document to display. The DOMParser turns the XML document into an object, which it then uses to build an array to use as the datagrid's data source.

Binding to XML Demo

Binding to XML Documentation

Editable TreeGrid

Create user-friendly TreeGrids for editing complex hierarchical data. TreeGrids are a simple way of displaying trees of data. The TreeGrid can be made editable by setting isReadOnly to false during the loadedRows event. An editable TreeGrid gives users the ability to make changes to data within a visual tree.

Editable TreeGrid Demo

Different Data Structures

Our TreeGrid supports binding to both homogeneous and heterogeneous data structures. This allows you to bind TreeGrid to a dataset where the children have the same object model as the parents. For example, a tree of people, where the children are also people. You are also able to bind TreeGrid to a dataset where the children have a different object model as the parents. For example a tree of orders where the children are products (a different data structure).

TreeGrid Data Structures Demo