Data Binding in Blazor MultiSelect Dropdown Component

30 Jan 20237 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" },
    };
}

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, you can disable the EnabledChangeOnBlur property. This will make the Change event to be fired on every value selection and removal instead of just when the component loses focus. 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>