jQuery TreeList - Use Hierarchical Data
If you use hierarchical data, set the dataStructure property to 'tree'. For an example of hierarchical data, see the following code.
jQuery
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'
});
});Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
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"
}];
}
@NgModule({
imports: [
// ...
DxTreeListModule
],
// ...
})<dx-tree-list
[dataSource]="hierarchicalData"
dataStructure="tree">
</dx-tree-list>All items with children have the items field. If you use another name for this field, specify it in the itemsExpr property.
jQuery
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'
});
});Angular
HTML
TypeScript
<dx-tree-list
[dataSource]="hierarchicalData"
dataStructure="tree"
itemsExpr="children">
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
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"
}]
}]
}];
}
@NgModule({
imports: [
// ...
DxTreeListModule
],
// ...
})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 property. It will notify the UI component which rows do not need the expand button.
NOTE
Editing does not work with hierarchical data sources out of the box, but you can use the code sample from the following knowledge base article to implement it: TreeList - How to perform CRUD operations on a hierarchical data source.
See Also
Feedback