dx-tree-list Data not displaying when using *ngIf to show a dx-select-box conditionally

I'm working with Angular and using the DevExtreme dx-tree-list and dx-select-box components. I want to show the dx-select-box dynamically based on a condition (showAdjustmentBudgetBases), but when I do this, the data in my dx-tree-list no longer displays any data.

Here is the relevant portion of my HTML:

<dxi-item itemType="group">
<dx-tree-list height="400" #budgetLock id="departmentListBudgetLocking"
[dataSource]="departmentList"
dataStructure="tree" itemsExpr="items" parentIdExpr="worD_CODE"
[showRowLines]="true"
[showBorders]="true" [columnAutoWidth]="true" [(selectedRowKeys)]="selectedRowKeys">
<dxo-selection mode="multiple" [recursive]="true"></dxo-selection>
<dxo-filter-row [visible]="true"></dxo-filter-row>
<dxi-column dataField="text" [allowFiltering]="true" caption="Select All"></dxi-column>
</dx-tree-list>
</dxi-item>

<dxi-item *ngIf="showAdjustmentBudgetBases" itemType="group">
<dxi-item dataField="adjustmentBudgetBaseId"
editorType="dxSelectBox"
[editorOptions]="{dataSource: finyearAdjustmentBudgetBases, displayExpr: 'finyearAdjustmentBudgetBase', valueExpr: 'id', onValueChanged: adjustmentBudgetBaseEvent}">
<dxi-validation-rule type="required"></dxi-validation-rule>
<dxo-label [text]="finyearAdjustmentBudgetBaseLabel"></dxo-label>
</dxi-item>
</dxi-item>


Problem: When I set showAdjustmentBudgetBases to true, the dxSelectBox is rendered as expected, but the dx-tree-list no longer displays any data (departmentList is empty). If I set showAdjustmentBudgetBases to false, the dx-tree-list shows its data again.

What I've tried: Ensured that departmentList contains data.

Verified that showAdjustmentBudgetBases is set correctly in the component.

Tried changing the order of elements in the HTML.

Used ChangeDetectorRef to manually trigger change detection when the condition changes, but it didn't resolve the issue.

My Guess: I suspect the issue is related to how *ngIf is causing Angular to re-render the dx-tree-list when the condition for the dx-select-box changes. This might be disrupting the dx-tree-list's data binding, but I'm not sure how to prevent this.

Can anyone help me figure out why the dx-tree-list data is not displaying when showAdjustmentBudgetBases is true? How can I conditionally show the dx-select-box without affecting the rendering of the dx-tree-list?

Continue reading...