Selection and deselection in MultiSelect

8 Nov 202422 minutes to read

Get selected value

Get the selected value of the MultiSelect component in the ValueChange event 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"];
    }
}

Programmatically change the selected value

Change the component value programmatically or externally by the component instance using the @ref attribute of the component. The following sample shows how to change the value of the component using click event of the button component.

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 triggered when the value of the MultiSelect component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed 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 triggered when you select any value in the MultiSelect component. Get the necessary arguments including the SelectEventArgs.ItemData. Also, prevent the selection of items by setting the SelectEventArgs.Cancel property as true provided by the event arguments.

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

Get the entire object belonging to the value selected in the component using the GetDataByValue method.

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

Focus the component programmatically using the FocusAsync public method. It will set focus instantly to the MultiSelect component when invoking it.

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

To clear the MultiSelect value programmatically, use the ClearAsync method. This method clears out the selected values from the SfMultiSelect<TValue, TItem> component and sets the Value property 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

To prevent the page from reloading when using the MultiSelect component inside a form, you can specify the type of the button as “button” by utilizing the HTMLAttributes property. This will prevent the page from reloading 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

In order to trigger the FocusAsync() and FocusOutAsync() methods using the instance of the combobox, you can use buttons. You can bind the click event of the button to the FocusAsync() and FocusOutAsync() methods. When the button is clicked, it triggers the corresponding method on the combobox.

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 will trigger when the component gets focused.

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 will trigger when focus moves out from the component.

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
    }
}