Selection and deselection in MultiSelect

4 Nov 202522 minutes to read

Get selected value

Get the selected values of the MultiSelect component in the ValueChange event by using the MultiSelectChangeEventArgs.Value property.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
    <MultiSelectFieldSettings Value="Text" Text="Text"></MultiSelectFieldSettings>
    <MultiSelectEvents TValue="string[]" TItem="Games" ValueChange="OnValueChange"></MultiSelectEvents>
</SfMultiSelect>

@code {
    public class Games
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
    };
    public void OnValueChange(MultiSelectChangeEventArgs<string[]> args)
    {
        Console.WriteLine("The multiselect Value is: ", args.Value);
    }
}

Preselected value on OnInitializedAsync

Bind the pre-selected value to the MultiSelect component using the @bind-Value attribute. Assign the value property inside the OnInitializedAsync lifecycle. The following sample shows how to bind the value on the initial rendering of the component.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="string[]" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="multiSelectValue">
    <MultiSelectFieldSettings Value="ID" Text="Game"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    public string[] multiSelectValue { get; set; }

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };
    protected override async Task OnInitializedAsync()
    {
        multiSelectValue = ["Game4","Game5"];
    }
}

Blazor MultiSelect with pre-select value

Programmatically change the selected value

Change the component’s value programmatically by referencing the component instance via the @ref attribute. The following example updates the value in a button click handler.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfMultiSelect TValue="string[]" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="multiSelectValue">
        <MultiSelectFieldSettings Value="ID" Text="Game"></MultiSelectFieldSettings>
    </SfMultiSelect>
</div>
<div>
    <SfButton Content="Click to change the value" OnClick="OnBtnClick"></SfButton>
</div>

@code {
    public string[] multiSelectValue { get; set; } = new string[] { "Game10" };

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }
    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };
    public void OnBtnClick()
    {
        multiSelectValue = ["Game4"];
    }
}

Blazor MultiSelect with pre-select value before

ValueChange event

The ValueChange event is raised when the value of the MultiSelect changes. The event args include the current value and the previously selected value.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="GameFields" TValue="string[]" DataSource="@Games">
    <MultiSelectEvents TItem="GameFields" TValue="string[]" ValueChange="@ValueChangeHandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void ValueChangeHandler(MultiSelectChangeEventArgs<string[]> args)
    {
        // Here you can customize your code
    }
}

OnValueSelect event

The OnValueSelect event is raised when an item is selected in the popup. Access item data via SelectEventArgs.ItemData. Prevent selection by setting SelectEventArgs.Cancel to true.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="GameFields" TValue="string[]" AllowFiltering="true" DataSource="@Games">
    <MultiSelectEvents TItem="GameFields" TValue="string[]" OnValueSelect="@OnValueSelecthandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void OnValueSelecthandler(SelectEventArgs<GameFields> args)
    {
        // Here you can customize your code
    }
}

Get selected item by value

Retrieve the full data item for a given value by using GetDataByValueAsync.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfMultiSelect @ref="comboObj" TValue="string[]" TItem="Games" Width="300px" Placeholder="Select a game" @bind-Value="@multiSelectValue" DataSource="@LocalData">
        <MultiSelectFieldSettings Value="ID" Text="Game"></MultiSelectFieldSettings>
    </SfMultiSelect>
</div>
<div>
    <SfButton Content="Click to get the value" OnClick="OnBtnClick"></SfButton>
</div>

@code {
    public string[] multiSelectValue { get; set; }

    SfMultiSelect<string[], Games> comboObj;

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10", Game= "Tennis"},
    };

    public void OnBtnClick()
    {
        var MultiSelectValue = comboObj.GetDataByValueAsync(multiSelectValue);
        Console.WriteLine(MultiSelectValue);
    }
}

Focus the next component on selection

Programmatically set focus by using the FocusAsync method. This immediately moves focus to the MultiSelect when invoked.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using System.Threading

<h4>MultiSelect A</h4>
<SfMultiSelect ID="multiselect1" TValue="string[]" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
    <MultiSelectEvents TValue="string[]" TItem="Countries" Closed="@(e => OnClose(e, MultiSelectObj))"></MultiSelectEvents>
</SfMultiSelect>
<h4>MultiSelect B</h4>
<SfMultiSelect @ref="MultiSelectObj" ID="multiselect2" TValue="string[]" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
@code {
    SfMultiSelect<string[], Countries> MultiSelectObj;

    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" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };

    public async Task OnClose(ClosedEventArgs args, SfMultiSelect<string[], Countries> componentRef)
    {
        Thread tread = new Thread(
             async () =>
             {
                 Thread.Sleep(5);
                 await componentRef.FocusAsync();
             }
          );
        tread.Start();
        await Task.CompletedTask;
    }
}

Programmatically clear the selected value

Clear the MultiSelect selection by using ClearAsync. This removes the selected values and sets Value to null.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<div>
    <SfMultiSelect @ref="multiSelectObj" TValue="string[]" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="MultiSelectValue">
        <MultiSelectFieldSettings Value="ID" Text="Game"></MultiSelectFieldSettings>
    </SfMultiSelect>
</div>

<div style="margin-top:10px">
    <SfButton Content="Clear the value" OnClick="CrearValue"></SfButton>
</div>


@code {
    
    SfMultiSelect<string[], Games> multiSelectObj;

    public string[] MultiSelectValue { get; set; } = new string[] { "Tennis" };

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
    }

    List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Game= "American Football" },
        new Games() { ID= "Game2", Game= "Badminton" },
        new Games() { ID= "Game3", Game= "Basketball" },
        new Games() { ID= "Game4", Game= "Cricket" },
        new Games() { ID= "Game5", Game= "Football" },
        new Games() { ID= "Game6", Game= "Golf" },
        new Games() { ID= "Game7", Game= "Hockey" },
        new Games() { ID= "Game8", Game= "Rugby"},
        new Games() { ID= "Game9", Game= "Snooker" },
        new Games() { ID= "Game10",Game= "Tennis"},
    };

    public void CrearValue()
    {
        multiSelectObj.ClearAsync();
    }
}

Prevent reload on form submit

When the MultiSelect is used inside a form, prevent page reloads by setting the button’s type="button" (instead of the default type="submit"). This avoids form submission when the button is clicked.

CSHTML

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;

<form>
    <div>
        <label class="example-label">Select a game</label>
        <SfMultiSelect TItem="GameFields" TValue="string[]" DataSource="@Games" Placeholder="Select a game">
            <MultiSelectFieldSettings Value="ID" Text="Text"></MultiSelectFieldSettings>
        </SfMultiSelect>
    </div>
    <div class="submit-btn">
        <SfButton HtmlAttributes="@TypeChange" IsPrimary="true">Submit</SfButton>
    </div>
</form>

@code {
    private Dictionary<string, object> TypeChange = new Dictionary<string, object>()
    {
        { "type", "button"}
    };

    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
    };
}

Programmatically trigger onChange event

Trigger the ValueChange event manually by using the instance (taken from @ref attribute) of the MultiSelectEvents. In the following example, the ValueChange event is invoked inside the Created event handler. As per the following code, it will trigger once the component is created or rendered on the page.

CSHTML

@using Syncfusion.Blazor.DropDowns
@using System.Threading

<SfMultiSelect ID="combobox" TValue="string[]" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
    <MultiSelectEvents @ref="combObj" TValue="string[]" TItem="Countries" Created="onCreate" ValueChange="ChangeCountry"></MultiSelectEvents>
</SfMultiSelect>

@code {
    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" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
    
    // Change combObj to a field
    public MultiSelectEvents<string[], Countries> combObj;

    public void onCreate()
    {
        var args = new MultiSelectChangeEventArgs<string[]> { Value = new[] { "CM" } };
        combObj.ValueChange.InvokeAsync(args);
    }

    public void ChangeCountry(MultiSelectChangeEventArgs<string[]> args)
    {
        Console.WriteLine("Value has been changed!!");
    }
}

Programmatically focus in and focus out the component

Use buttons to invoke the FocusAsync() and FocusOutAsync() methods on the MultiSelect instance to move focus in and out programmatically.

RAZOR

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="Focus">Focus</SfButton>

<SfButton @onclick="FocusOut">FocusOut</SfButton>

<SfMultiSelect @ref="MultiObj" TValue="string[]" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue">
    <MultiSelectFieldSettings Value="ID" Text="Text"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
SfMultiSelect<string[], Games> MultiObj;

public string[] GameValue { get; set; } = new string[]{ "American Football"};

public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}

List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};

public void Focus()
{
this.MultiObj.FocusAsync();
}

public void FocusOut()
{
this.MultiObj.FocusOutAsync();
}

}

While focusing and focus out the following event get triggered.

Focus event

The Focus event is raised when the component receives focus.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="GameFields" TValue="string[]" DataSource="@Games">
    <MultiSelectEvents TItem="GameFields" TValue="string[]" Focus="@FocusHandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void FocusHandler(Object args)
    {
        // Here you can customize your code
    }
}

Blur event

The Blur event is raised when the component loses focus.

CSHTML

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TItem="GameFields" TValue="string[]"  DataSource="@Games">
    <MultiSelectEvents TItem="GameFields" TValue="string[]" Blur="@BlurHandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {
    public class GameFields
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<GameFields> Games = new List<GameFields>() {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
     };

    private void BlurHandler(Object args)
    {
        // Here you can customize your code
    }
}

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Selection and deselection in MultiSelect

Get selected value

Preselected value on OnInitializedAsync

Programmatically change the selected value

ValueChange event

OnValueSelect event

Get selected item by value

Focus the next component on selection

Programmatically clear the selected value

Prevent reload on form submit

Programmatically trigger onChange event

Programmatically focus in and focus out the component

Focus event

Blur event