[Solved] DropDownTree in a Razor component always initially blank--doesn't show initial value.

[Jonathan]

(Telerik.UI.for.Blazor v13.1.0)

I was scratching my head over this one for a while. No matter what I tried, even though the data and initial value were valid, the control always initially showed "None" (or just blank, depending on DefaultText). Interestingly, the X close button also was visible, so the control "knew" the value was set.

I tried all kinds of workarounds, delayed rendering, Rebind(), setting the value programmatically, nothing.

I'm sharing the workaround that worked for me, hopefully save some other users some time. Turned out all I needed to do was to add a custom ValueTemplate:

<TelerikDropDownTree Data="@myTreeData"
                     @bind-Value="selectedTreeValue"
                     DefaultText="None"
                     ShowClearButton="true">
    <ValueTemplate>
        @{
            var selectedItem = FindItemById(myTreeData, selectedTreeValue);
            <span>@(selectedItem != null ? selectedItem.Text : "None")</span>
        }
    </ValueTemplate>
</TelerikDropDownTree>

[Dimo]

Jonathan, can you please share a runnable test page that exhibits the unexpected behavior? Our online demos and documentation examples seem to work fine.

[Jonathan]

A basic example demonstrating the problem. Initial value is set, but control does not show it.

https://blazorrepl.telerik.com/cUuIGWOn24frhju706

 

 

[Dimo]

The DropDownTree is missing a ValueField parameter. It is required in this case, because the data item value is held by a property name, which is not called Value, but Id.

ValueField="@nameof(TreeItem.Id)"

The mentioned ValueTemplate is not a true workaround. When the user selects a new item from the dropdown, the visible text is correct, but the component Value is not.