Hello,
I am having a hard time understanding why a TreeView displays the default "no data" message after applying a filter on it's datasource. The filter should be applied when an item in selected in a select box component. The datasource does indeed contain items after the filtering, but the UI shows nothing.
I am pasting some code snippets that will hopefully help you in understanding what I am doing wrong.
Mark-up:
HTML<dx-select-box [dataSource]="sectionsSelectBoxData" displayExpr="Label" valueExpr="Id"
[searchMode]="'contains'" [searchExpr]="'Label'" [searchTimeout]="200" [searchEnabled]="true"
showClearButton="true" (onValueChanged)="filterBySection($event)">
</dx-select-box>
<dx-tree-view id="simple-treeview" dataStructure="plain" [dataSource]="filteredTreeViewData"
parentIdExpr="idParent" keyExpr="id" displayExpr="code" (onItemClick)="selectSectionOrRequirement($event)"
itemTemplate="itemTemplate">
<div *dxTemplate="let item of 'itemTemplate'">
{{item.code}}
</div>
</dx-tree-view>
Datasource:
TypeScriptngOnInit(): void {
this.ebDataService.getSectionsTreeView().subscribe(resp => {
this.filteredTreeViewData = new DataSource({
store: {
data: resp,
type: 'array',
key: 'id',
},
});
});
}
and the event that should trigger the filter:
TypeScriptfilterBySection(e) {
if (e.value) {
this.filteredTreeViewData.filter([["id", "=", parseInt(e.value)], "or", ["idParent", "=", parseInt(e.value)]]);
// this makes the treeview show "no data". commeting this out shows the same items previous to applying the filtering
this.filteredTreeViewData.reload();
} else {
}
}
Thank you!
Hello Cristina,
It looks like the record of the root node doesn't meet your filter criteria and DataSource filters it out. As a result, the TreeView doesn't have the root node and cannot build a tree.
Would you please clarify why you don't use the built-in search functionality: TreeView - Search? You can call the TreeView.option method to change the searchValue option in code.
Hello and thank you for your reply.
The data structure is plain. It does not have a root node. Let's say, for the sake of the argument, that I will add a "root item" in my array. From what I understand, the out of the box filter functionality will not work anyway, because at some point, some elements will not match the filter criteria. That sounds like an incomplete functionality to me. It makes me think that I have to reassign the idParent every time, to make sure it resembles a tree structure. Or am I missing something?
Hello,
By the root node I meant a top-level node in TreeView. As TreeView displays a hierarchy of nodes, there is always a root node or root nodes (top-level nodes). The shape of the data source doesn't matter.
As your code filters records at the DataSource level, TreeView doesn't have access to records that are filtered out. If you filter out records that are displayed as top-level nodes in TreeView, TreeView cannot find records that should be displayed as top-level nodes. As a result, TreeView doesn't display nodes.
TreeView uses the TreeView.rootValue option to determine which records should be displayed on top. In general, it is possible to change this option on the fly.
However, it looks much easier to me to use the built-in search functionality. TreeView keeps parent nodes even if they don't have the search substring. You can test it in our online demo: TreeView - Search Bar. Type in the top search bar to see the results. It works in the same way with a plain data source.
Please consider this and let me know if you encounter any difficulties.