admin 11/23/2021

Latest release: v6.0.1. Overview Install Examples API. Vaadin-grid is a free, high quality data grid / data table Web Component. Part of the Vaadin components. Features Lazy loading. Lazy loading of data from any data source. Easily present and scroll through 100k. Overview The WinUI TreeGrid control also known as multicolumn treeview is a data-oriented control that displays self-relational data in a tree structure user interface like multicolumn treeview. The data can be loaded on demand. In the above code example, the hierarchical data binding is represented in which the childMapping property denotes the hierarchy relationship; whereas in self-referencing data binding idMapping and parentIdMapping denotes the hierarchy relationship. Module injection. To create TreeGrid with additional features, inject the required modules.


  • Create TreeGrid from HTML table
  • Simple and flexible javascript
  • Compatible with bootstrap
  • Ability to save the state of the tree
  • Events support

Treegrid Lwc


Step 1. Initialize plugin

Step 2. Make table

Step 3. See result

Root nodeAdditional info
Node 1-1Additional info
Node 1-2Additional info
Node 1-2-1Additional info

Other examples

Configuration Settings


Free Grid Paper

ParameterTypeDefault valueDescription
treeColumnNumeric0Number of column using for tree
initialStateStringexpandedInitial state of tree
'expanded' - all nodes will be expanded
'collapsed' - all nodes will be collapsed
saveStateBooleanfalseIf true you can reload page and tree state was saved
saveStateMethodStringcookie 'cookie' - save state to cookie
'hash' - save state to hash
saveStateNameStringtree-grid-state Name of cookie or hash to save state.
expanderTemplateString<span></span>HTML Element when you click on that will be collapse/expand branches
expanderExpandedClassStringtreegrid-expander-expandedClass using for expander element when it expanded
expanderCollapsedClassStringtreegrid-expander-collapsedClass using for expander element when it collapsed
indentTemplateString<span></span>HTML Element that will be placed as padding, depending on the depth of nesting node
onCollapseFunctionnullFunction, which will be executed when one of node will be collapsed
onExpandFunctionnullFunction, which will be executed when one of node will be expanded
onChangeFunctionnullFunction, which will be executed when one of node will be expanded or collapsed

Public methods

Method nameDescriptionExample
getRootNodesReturns the root branches
getNodeIdReturn the id of node
getParentNodeIdReturn the id of parent node or null if node is root
getAllNodesReturn the all nodes of tree
getParentNodeReturn the parent node or null if node is root
getChildNodesReturn the child nodes or null if node is leaf
getDepthReturns the depth of nested branch
isNodereturn true if element is node
isLeafIs there a node leaf
isLastReturn true if node is last in branch
isFirstReturn true if node is first in branch
isExpandedIs node expanded
isCollapsedIs node collapsed
isOneOfParentsCollapsedIs at least one of the parent nodes is collapsed
expandExpand node
collapseCollapse node
expandRecursiveExpand nodes recursively
collapseRecursiveCollapse nodes recursively
expandAllExpand all nodes
collapseAllCollapse all nodes
toggleCollapse node if it expanded and expand when collapsed
renderRedraw the node and all its children


Bootstrap Tree Grid

Event nameDescriptionExample
collapseWill fire when node collapsed
expandWill fire when node expanded
changeWill fire when node changed. Expanded or collapsed

Unit Tests

The need for treedatatype?

Short Story: Should we remove treedatatype from the code? It appears to be a synonym for datatype.


Background: I recently had a bug in my code where I set treedatatype:'json', but forgot to set datatype (admitted jqGrid newbie mistake). The result was a treeGrid that failed to load initially, but successfully loaded after refresh. Digging into grid.base.js and grid.treegrid.js, I noticed that treedatatype is originally set to datatype, then datatype is later overwritten with treedatatype.

Should we remove treedatatype? …or is there another (or future) use for treedatatype that I am missing?


Thank you