Declined
Last Updated: 06 Oct 2021 21:12 by Stefan
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.
2 comments
Stefan
Posted on: 06 Oct 2021 21:12

I want to add solution for doing the same with Enum value type. Let's say you have enum EnumValues = {Unknown, First, Second, Third} and the MyValueField is of type EnumValues. I want to show the First, Second and Third in the drop down but when the SelectedValue = Unknown I want the dropdown to show blank. Two ways to accomplish:

1. myDdlData will have items for the First, Second and Third but not for the Unknown. Set the DefaultText = " ". Note the single blank space. Setting the DefaultText = "" (empty string) doesn't change the selection.

2. myDdlData will have item for Unknown, First, Second and Third. The Unknown item will be: new MyDdlModel { MyTextField = "", MyValueField = EnumValues.Unknown };

 

Feel free to use my comment in documentation.

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.