Selection and deselection in MultiSelect

19 Feb 202624 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($"Selected: {string.Join(", ", args.Value ?? new string[] { })}");
    }
}

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"];
    }
}

Programmatically change the selected value

Change the component’s value programmatically by updating the bound property. Use the @bind-Value attribute to bind the value property, then modify the property in a button click handler or other event to update the selection.

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"];
    }
}

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 style="margin-top: 15px;">
    <SfButton Content="Click to get the value" OnClick="OnBtnClick"></SfButton>
</div>



@code {
    public string[] multiSelectValue { get; set; }
    public List<Games> SelectedGameItems { 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 async Task OnBtnClick ()
    {
        if (comboObj != null && multiSelectValue != null && multiSelectValue.Length > 0)
        {
          
            SelectedGameItems = await comboObj.GetDataByValueAsync(multiSelectValue);

            if (SelectedGameItems != null)
            {
                foreach (var item in SelectedGameItems)
                {
                    Console.WriteLine($"Selected - ID: {item.ID}, Game: {item.Game}");
                }
            }
        }
    }
}

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 resets Value based on the TValue type:

• For non-nullable types (e.g., int, string): resets to the default value (0 for int, empty string for string)
• For nullable types (e.g., int?, string?): sets 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 ValueChange 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 Syncfusion.Blazor.Buttons

<SfMultiSelect ID="combobox" TValue="string[]" TItem="Countries"
               Placeholder="e.g. Australia"
               @bind-Value="@SelectedValue"
               DataSource="@Country">

    <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>

    <MultiSelectEvents @ref="combObj"
                       TValue="string[]"
                       TItem="Countries"
                       ValueChange="ChangeCountry">
    </MultiSelectEvents>

</SfMultiSelect>

<SfButton OnClick="@ValueSelectHandler">ValueSelect</SfButton>

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

    public MultiSelectEvents<string[], Countries> combObj;

    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }

    List<Countries> Country = new()
    {
        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 void ValueSelectHandler ()
    {
        // Programmatically selecting a value triggers ValueChange automatically
        SelectedValue = new string[] { "BM" };
    }

    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();
}

}

When the component receives or loses focus, the following events are 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
    }
}