In my Angular(v19) application with Devextreme-Angular(v24.1.7), I am using a dx-tree-view as a sidebar navigation.
<dx-tree-view
(onItemClick)="navigateToItem($event)"
[items]="treeViewData()"
[searchEnabled]="true"
[selectByClick]="true"
selectionMode="single">
</dx-tree-view>
I have three scenarios in which I want to change the page and keep the navigation tree synchronized (i.e., the opened page, including its parents, should be selected and expanded).
Navigating by entering a URL:
Since my tree view is only used once in the layout, I can initially load the URL parameters and pass them to my API's get method to retrieve the tree view, ensuring that my desired item is selected and expanded. This approach works fine.
Navigating through the tree navigation:
This is self-explanatory and works as expected. I have also implemented auto-expanding in my navigateToItem($event) function.
Navigating through other components:
This is the challenging part. I can obtain the parameters of the selected page and pass them to my component containing the tree view. However, I am struggling to find a clean way to synchronize my tree view items. The only possible solution I have found is to iterate through all items, which is inconvenient due to the potentially long and nested array. Could you please recommend a better approach? Perhaps there is an event, API, or property that allows selecting items by ID? I have consulted the documentation, but I couldn't find a suitable answer, or I might be overlooking something.
I am also trying to avoid using effect if possible.
I would be glad if anyone could help me out with this.
PS:
I also submitted a support Ticket at DevExpress. But it might take some time until I get an answer. If I happen to get there an answer first, I would keep this post updated as well, for the sake of sharing knowledge.
I have received an answer from Devexpress Support:
I could use TreeView.selectItem(key) to select an item by id programmatically.