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.
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.
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.
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.
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.
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).