New to Telerik UI for Blazor? Download free 30-day trial

Clear the value (selection) of a combobox, dropdown, input

Environment

Product ComboBox for Blazor, DropDownList for Blazor, Textbox for Blazor, DatePicker for Blazor, all other inputs and date/time pickers for Blazor

Description

There is no Clear() method equivalent for combo boxes. How do I clear the selection or value of the input without changing it to the placeholder text value?

Solution

In Blazor, you clear the value of an input (such as a combobox, textbox, doropdownlist, date picker and so on) by changing its Value parameter to the default value for its type (or to a desired other value).

With the MVVM patter used by the framework, you do not need methods like Clear() to remove selection - when the Value matches the default value for its type, the Telerik component will show the placeholder automatically (if one is set).

This approach applies to all inputs

Here are a few examples in their corresponding tabs per component:

Clear an input (or selected item in a dropdown/combobox)

@selectedValue

<br />
<TelerikButton OnClick="@Clear">Clear</TelerikButton>

<TelerikComboBox @bind-Value="selectedValue" Placeholder="Select something"
                 Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField">
</TelerikComboBox>

@code {
    int selectedValue { get; set; }
    void Clear()
    {
        // clear the combo box value (selection)
        selectedValue = default;
    }

    //data binding below
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    //Define a preselected value when the component initializes
    protected override void OnInitialized()
    {
        selectedValue = 3;
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}
@selectedValue

<br />
<TelerikButton OnClick="@Clear">Clear</TelerikButton>

<TelerikTextBox @bind-Value="@selectedValue" PlaceHolder="type something"></TelerikTextBox>
@code{
    string selectedValue { get; set; } = "lorem ipsum";
    void Clear()
    {
        selectedValue = null;
    }
}
@selectedValue

<br />
<TelerikButton OnClick="@Clear">Clear</TelerikButton>

<TelerikDropDownList @bind-Value="selectedValue" DefaultText="Select something"
                 Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField">
</TelerikDropDownList>

@code {
    int selectedValue { get; set; }
    void Clear()
    {
        selectedValue = default;
    }

    //data binding below
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    //Define a preselected value when the component initializes
    protected override void OnInitialized()
    {
        selectedValue = 3;
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
}
@selectedValue

<br />
<TelerikButton OnClick="@Clear">Clear</TelerikButton>

<TelerikDatePicker @bind-Value="@selectedValue"></TelerikDatePicker>

@code {
    DateTime? selectedValue { get; set; } = DateTime.Now.Date;
    void Clear()
    {
        selectedValue = default;
    }
}
@selectedValue

<br />
<TelerikButton OnClick="@Clear">Clear</TelerikButton>

<TelerikNumericTextBox @bind-Value="@selectedValue"></TelerikNumericTextBox>

@code {
    int? selectedValue { get; set; } = 123;
    void Clear()
    {
        selectedValue = default;
    }
}

See Also

In this article