ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains about how to include a simple DropDownList 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 DropDownList component to the application

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

<EjsDropDownList ID="games" placeholder="Select a game"></EjsDropDownList>

Output be like below

DropDownList

Binding data source

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

    <EjsDropDownList ID="games" Index="2" fields="@dropDownFields" placeholder="Select a game"  DataSource="@games"></EjsDropDownList>

    @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"},
      };

      public object dropDownFields = new {
      text="text", value="id"
      };
  }

Output be like below

DataBinding

Configure the popup list

By default, the width of the popup list automatically adjusts according to the DropDownList input element’s width, and the height of the popup list has 300px.

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.

    <EjsDropDownList ID="games" Index="2" fields="@dropDownFields" popupHeight = '200px' placeholder="Select a game" popupWidth ='200px'  DataSource="@games"></EjsDropDownList>

    @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"},
      };

      public object dropDownFields = new {
      text="text", value="id"
      };
  }