[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.