DevExtreme jQuery/JS - Use Hierarchical Data

If you use hierarchical data, set the dataStructure option to 'tree'. For an example of hierarchical data, see the following code.

JavaScript
  • var hierarchicalData = [{
  • fullName: "John Heart",
  • position: "CEO",
  • city: "Los Angeles",
  • items: [{
  • fullName: "Samantha Bright",
  • position: "COO",
  • city: "Los Angeles",
  • items: [{
  • fullName: "Kevin Carter",
  • position: "Shipping Manager",
  • city: "Los Angeles"
  • }]
  • }]
  • }, {
  • fullName: "Robin Cosworth",
  • position: "Shipping Assistant",
  • city: "Los Angeles"
  • }];
  •  
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • dataSource: hierarchicalData,
  • dataStructure: 'tree'
  • });
  • });

All items with children have the items field. If you use another name for this field, specify it in the itemsExpr option.

JavaScript
  • var hierarchicalData = [{
  • fullName: "John Heart",
  • position: "CEO",
  • city: "Los Angeles",
  • children: [{
  • fullName: "Samantha Bright",
  • position: "COO",
  • city: "Los Angeles",
  • children: [{
  • fullName: "Kevin Carter",
  • position: "Shipping Manager",
  • city: "Los Angeles"
  • }]
  • }]
  • }];
  •  
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • dataSource: hierarchicalData,
  • dataStructure: 'tree',
  • itemsExpr: 'children'
  • });
  • });

When you load data from a remote source, and your data objects have a field that defines whether a row has nested rows, assign this field name to the hasItemsExpr option. It will notify the widget which rows do not need the expand button.

See Also