Unselect item

[Michael Lambert]

How do I unselect an item and have it so that Dropdown just displays the placeholder?

Mike

[Sureshkumar P]

Hi Michael, 

 

Greetings from Syncfusion support. 

 

We can reset the component value by setting the null. Kindly refer the code example here 

@using Syncfusion.Blazor.Data 

@using Syncfusion.Blazor.DropDowns 

 

    <SfDropDownList @ref="DDLObj" TItem="GameFields" TValue="int?" PopupHeight="230px" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games"> 

        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 

    </SfDropDownList> 

 

<button @onclick="ResetValue">Click to unselect value</button> 

 

@code { 

    SfDropDownList<int?, GameFields> DDLObj; 

 

    public class GameFields 

    { 

        public int? ID { get; set; } 

        public string Text { get; set; } 

    } 

    private List<GameFields> Games = new List<GameFields>() { 

        new GameFields(){ ID= 1, Text= "American Football" }, 

        new GameFields(){ ID= 2, Text= "Badminton" }, 

        new GameFields(){ ID= 3, Text= "Basketball" }, 

        new GameFields(){ ID= 4, Text= "Cricket" }, 

        new GameFields(){ ID= 5, Text= "Football" }, 

        new GameFields(){ ID= 6, Text= "Golf" }, 

        new GameFields(){ ID= 7, Text= "Hockey" }, 

        new GameFields(){ ID= 8, Text= "Rugby"}, 

        new GameFields(){ ID= 9, Text= "Snooker" }, 

        new GameFields(){ ID= 10, Text= "Tennis"}, 

     }; 

    public int? DropVal { get; set; } = 9; 

 

    public void ResetValue() 

    { 

        this.DropVal = null; 

    } 

 

} 

 

<style> 

    .destination { 

        right: 15px; 

        position: absolute; 

    } 

</style> 

 

 

Regards, 

Sureshkumar P 

[Eimantas Baigys]

Any chance this can be implemented as dropdown list feature rather than stupid button outside the component? 

This sounds like like self explanatory thing.. why it is not implemented into component?

[Berly Christopher]

Hi Eimantas Baigys, 

  

Already, we have provided support for clear the value from the component by using the clear button with help of setting true for the “ShowClearButton” property. The clear button will be visible when the DropDownList having value in it else it will be maintained in the hidden state.  

  

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListModel-2.html#Syncfusion_Blazor_DropDowns_DropDownListModel_2_ShowClearButton  

  

Else, if you want to clear the value programmatically we can set the value as null as mentioned in our previous update. 

  

 <SfDropDownList @ref="DDLObj" ShowClearButton=true TItem="GameFields" TValue="int?" PopupHeight="230px" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games">  

        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>  

    </SfDropDownList> 

  

  

 

  

Regards, 

Berly B.C 

[CageE]

Can't you add a small x on the right side of the dropdown to deselect. You know an "Unselect button" is not something that can be used in proper sites!

[UdhayaKumar Duraisamy]

As mentioned earlier, the DropdownList component has built-in support for a clear button on the right side of the input. You can enable the clear button by setting the ShowClearButton property to true. When the clear button is clicked, Value, Text, and Index properties are reset to null. Please refer to the code snippet shared below for more information.

@page "/"

 

@using Syncfusion.Blazor.DropDowns

 

<div style="margin:130px auto;width:300px">

    <SfDropDownList TValue="string" Placeholder="e.g. Australia" ShowClearButton="true" TItem="Countries" @bind-Value="@DropVal" DataSource="@Country" Width="300px">

        <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>

    </SfDropDownList>

</div>

@code {

    public string DropVal = "Canada";

    public class Countries

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

    List<Countries> Country = new List<Countries>

    {

        new Countries() { Name = "Australia", Code = "AU" },

        new Countries() { Name = "Bermuda", Code = "BM" },

        new Countries() { Name = "Canada", Code = "CA" },

        new Countries() { Name = "Cameroon", Code = "CM" },

    };

}