ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains about how to include a simple MultiSelect in your ASP.NET Core Razor application. You can refer ASP.NET Core Razor Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.EJ2.RazorComponents.DropDowns packages.

 @using Syncfusion.EJ2.RazorComponents

 @using Syncfusion.EJ2.RazorComponents.DropDowns

Adding MultiSelect component to the application

Now, add the Syncfusion Essential JS 2 MultiSelect component in any web page razor in the Pages folder. For example, the MultiSelect component is added in the ~/Pages/Index.razor page.

  <EjsMultiSelect id='firstname' placeholder='First Name'></EjsMultiSelect>

Binding data source

After initialization, populate the MultiSelect with data using the dataSource property. Here, an array of string values is passed to the MultiSelect component.

The following example illustrates the output in your browser.

   <EjsMultiSelect ID="default" PlaceHolder="Favorite Sports" DataSource="@games"></EjsMultiSelect>

   @functions{
     List<object> games = new List<object> {
       new { id= "Game1", text= "American Football" },
       new { id= "Game2", text= "Badminton" },
       new { id= "Game3", text= "Basketball" },
       new { id= "Game4", text= "Cricket" },
       new { id= "Game5", text= "Football" },
       new { id= "Game6", text= "Golf" },
       new { id= "Game7", text= "Hockey" },
       new { id= "Game8", text= "Rugby"},
       new { id= "Game9", text= "Snooker" },
       new { id= "Game10", text= "Tennis"},
     };
   }

Output be like below

DataBinding

Configure the popup list

By default, the width of the popup list automatically adjusts according to the MultiSelect input element’s width, and the height auto adjust’s according to the height of the popup list items.

The height and width of the popup list can also be customized using the popupHeight and popupWidth properties respectively.

In the following sample, popup list’s width and height are configured.

   <EjsMultiSelect ID="default" PlaceHolder="Favorite Sports" PopupHeight="200px" PopupWidth="200px" DataSource="@games"></EjsMultiSelect>

   @functions{
     List<object> games = new List<object> {
       new { id= "Game1", text= "American Football" },
       new { id= "Game2", text= "Badminton" },
       new { id= "Game3", text= "Basketball" },
       new { id= "Game4", text= "Cricket" },
       new { id= "Game5", text= "Football" },
       new { id= "Game6", text= "Golf" },
       new { id= "Game7", text= "Hockey" },
       new { id= "Game8", text= "Rugby"},
       new { id= "Game9", text= "Snooker" },
       new { id= "Game10", text= "Tennis"},
     };
   }