ASP.NET Core Blazor [Preview]
Search results

Getting Started

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

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

<EjsComboBox ID="ComboBox" PlaceHolder="Select a game"></EjsComboBox>

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

ComboBox

Binding data source

After initializing, populate the ComboBox with data using the DataSource property. Here, an array of string values is passed to the ComboBox component.

The following example illustrates the output in your browser.

<EjsComboBox ID="games"  PlaceHolder="Select a game" DataSource="@localdata">
<ComboBoxFieldSettings value="text"></ComboBoxFieldSettings>
</EjsComboBox>

@functions{

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

Output be like the below.

ComboBox

Custom values

The ComboBox allows the user to give input as custom value which is not required to present in predefined set of values. By default, this support is enabled by AllowCustom property. In this case, both text field and value field considered as same. The custom value will be sent to post back handler when a form is about to be submitted.

<EjsComboBox ID="games" AllowCustom="true" PlaceHolder="Select a game" DataSource="@localdata">
<ComboBoxFieldSettings value="text"></ComboBoxFieldSettings>
</EjsComboBox>

@functions{

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

Configure the popup list

By default, the width of the popup list automatically adjusts according to the ComboBox 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.

<EjsComboBox ID="games" PopupHeight="200px" PopupWidth="200px" AllowCustom="true" PlaceHolder="Select a game" DataSource="@localdata">
<ComboBoxFieldSettings value="text"></ComboBoxFieldSettings>
</EjsComboBox>

@functions{

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