Declined
Last Updated: 22 Jun 2020 14:18 by ADMIN
IT
Created on: 18 Jun 2020 22:35
Category: UI for Blazor
Type: Bug Report
0
DropDownList doesn't clear when the value is set to NULL

<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@SelectedValue"  Width="100%"  />

        public string SelectedValue { get; set; }
        public class MyDdlModel
        {
            public int MyValueField { get; set; }
            public string MyTextField { get; set; }
        }
        protected IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

I didn't extract this part, but if you make a button that sets SelectValue = null, then the dropdownlist keeps the same value displayed.
1 comment
ADMIN
Eric R | Senior Technical Support Engineer
Posted on: 22 Jun 2020 14:18

Hello,

Thank you for providing the code snippet. With it, I was able to reproduce and isolate the issue. Let me go over what I found below.

Investigation

I found the issue is the data model bound to the DropDownList doesn't include a null value option. Assuming the SelectedValue is set to 0 on button click, then this needs to be in the myDdlData object. Since it doesn't exist the UI doesn't change.

To get this to work, either set a Default Value property or ensure the value exists in the data model. Let me go over these below.

Setting a Default Value in the Component

The DropDownList component includes a DefaultText property and adding this to the component markup will enable clearing the selected value. See the following code snippet for a working example.

@page "/"

    <TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@SelectedValue" Width="30%" DefaultText="Select an Item" />
    <TelerikButton OnClick="@SelectionChange">Clear Selection</TelerikButton>

@code {
    public int SelectedValue { get; set; } = 0;
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
    protected IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    protected void SelectionChange()
    {
        SelectedValue = 0;
        Console.WriteLine(SelectedValue);
    }

}

Including a Default Value in the Data Model

This would work by adding a default item to the 0 value in the data source. The data used in the sample is for testing purposes and most model data would be backed by a database. In this case, during model construction it may be possible to add a default value 0 with custom text like, Select an Item.

Wrapping Up

The DefaultText with a missing/null ValueField is described in the Features Section on the Overview page and the Considerations Section on the Data Binding page of the documentation. For additional clarity, the introductory paragraphs in the Data Binding documentation has been updated as well.

Since this is already implemented, the status of the bug report will need to be changed to Declined. However, we do appreciate your feedback and welcome any that you may have. 

Please let me know if you need any additional information. Thank you for being a valued UI for Blazor developer.

Regards,


Eric R | Senior Technical Support Engineer
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.