Data Binding in Blazor MultiSelect Dropdown Component

29 Aug 20238 minutes to read

Data binding can be achieved by using the bind-Value attribute and its supports string, int, Enum, DateTime, bool types. If component value has been changed, it will affect all the places where it is bound to the variable for the bind-value attribute.

@using Syncfusion.Blazor.DropDowns

@foreach (var SelectedValue in MultiVal)
{
    <p>MultiSelect value is:<strong>@SelectedValue</strong></p>
}

<SfMultiSelect Placeholder="e.g. Australia" @bind-Value="@MultiVal" DataSource="@Countries">
    <MultiSelectFieldSettings Value="Name"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

   public string[] MultiVal { get; set; } = new string[] { };

    public class Country
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Country> Countries = new List<Country>
{
        new Country() { Name = "Australia", Code = "AU" },
        new Country() { Name = "Bermuda", Code = "BM" },
        new Country() { Name = "Canada", Code = "CA" },
        new Country() { Name = "Cameroon", Code = "CM" },
    };
}

Enum binding

Convert the Enum data into a list of strings and bind it to the DataSource property of the SfMultiSelect component to bind Enum types to the MultiSelect Dropdown component.

@using Syncfusion.Blazor.DropDowns

<SfMultiSelect TValue="List<string>" TItem="string" Placeholder="Select a color" DataSource="@MultiSelectDataSource"
@bind-Value="SelectedValues">
    <MultiSelectFieldSettings Value="Value" Text="Text"></MultiSelectFieldSettings>
</SfMultiSelect>

@if (SelectedValues != null)
{
    <p>Selected Colors: @string.Join(", ", SelectedValues)</p>
}

@code {
    public enum Color
    {
        Red,
        Blue,
        Green,
        Yellow
    }

    public class EnumModel
    {
        public Color Value { get; set; }
        public string Text { get; set; }
    }

    private List<string> MultiSelectDataSource { get; set; } = new List<string>();
    private List<string> SelectedValues { get; set; }

    protected override void OnInitialized()
    {
        MultiSelectDataSource = Enum.GetNames(typeof(Color)).ToList();
        SelectedValues = new List<string> { Enum.GetName(typeof(Color), 2) };
    }
}

Customizing the Change Event

MultiSelect component by default fires the Change event when the component loses focus. However, if you want the Change event to be fired every time a value is selected or removed, disable the EnabledChangeOnBlur property. This will make the Change event be fired on every value selection and removal instead of just when the component loses focus. The default value of EnableChangeOnBlur is true.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" EnableChangeOnBlur="@EnableChangeOnBlur"> 
       <MultiSelectEvents TItem="Games" TValue="string[]" ValueChange="@ValueChangeHandler"></MultiSelectEvents>
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</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 bool EnableChangeOnBlur { get; set; } = false;

    private void ValueChangeHandler()
    {
        // Here you can customize your code
    }
}

Get Data by value

You can retrieve the selected value from the dropdown list by using the GetDataByValue(TValue) method through an instance of the dropdown list. You can bind the click event of a button to the GetDataByValue(TValue) method of the dropdown list instance. When the button is clicked, it will trigger the GetDataByValue(TValue) method on the dropdown list and return the selected value.

RAZOR

@using Syncfusion.Blazor.DropDowns;

<div class=button>
    <button  @onclick="GetDataByValue">Button</button>
</div>
<div class=content>
<SfMultiSelect @ref="MultiSelectObj" TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" ShowDropDownIcon="true" @bind-Value="@GameValue"> 
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>
</div>

@code {
    SfMultiSelect<string[],Games> MultiSelectObj;
    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 string[] GameValue { get; set; } = { "Game5"};

    public async void GetDataByValue()
    {
        var val = this.MultiSelectObj.Value;
        var Data = await this.MultiSelectObj.GetDataByValue (val);
        Console.WriteLine (Data[0].ID.ToString());
        Console.WriteLine (Data[0].Text.ToString());
    }
}
<style>
    .content{
        margin-top: 5px;
    }
</style>

Get List Item

You can retrieve the list items from the dropdown list by using the GetItemsAsync() method through an instance of the dropdown list. You can bind the click event of a button to the GetItemsAsync() method of the dropdown list instance. When the button is clicked, it will trigger the GetItemsAsync() method on the dropdown list and return the list items

RAZOR

@using Syncfusion.Blazor.DropDowns;

<div class=button>
    <button  @onclick="GetItems">Button</button>
</div>
<div class=content>
<SfMultiSelect @ref="MultiSelectObj" TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" ShowDropDownIcon="true" @bind-Value="@GameValue" FilterType="FilterType.StartsWith"> 
    <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>
</div>

@code {
    SfMultiSelect<string[],Games> MultiSelectObj;
    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 string[] GameValue { get; set; } = { "Game5"};
    
    public async Task GetItems () {
        IEnumerable<Games> Items = await this.MultiSelectObj.GetItemsAsync();
        foreach(var listItem in Items)
        {
            Console.WriteLine (listItem.ID);
            Console.WriteLine (listItem.Text);
        }
    }
}
<style>
    .content{
        margin-top: 5px;
    }
</style>