---
title: "Easiest Way to Create a Multicolumn ComboBox in Blazor"
published_at: "2020-06-08T10:00:35+00:00"
modified_at: "2026-02-10T09:50:39+00:00"
url: "https://www.syncfusion.com/blogs/post/easiest-way-to-create-a-multicolumn-combobox-in-blazor"
excerpt: "In this blog post, we will look at the creation of a multicolumn combo box component in Blazor. You will learn how to configure and bind the data in the Syncfusion Blazor ComboBox component to make it display multiple columns..."
taxonomy_category:
  - "Blazor"
  - "Syncfusion"
taxonomy_post_tag:
  - "Blazor"
  - "combo box control"
  - "E-book"
  - "multi selection combo box"
  - "Syncfusion"
---

# Easiest Way to Create a Multicolumn ComboBox in Blazor

[Saravanan G](https://www.syncfusion.com/blogs/author/saravanang)

![Easiest Way to Create a Multicolumn ComboBox in Blazor](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/Easiest-Way-to-Create-a-Multicolumn-ComboBox-in-Blazor.png)


In this blog post, we will look at the creation of a multicolumn combo box component in Blazor. You will learn how to configure and bind the data in the [Syncfusion Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox)
 component to make it display multiple columns of data.

## What is a multicolumn combo box?

A standard ComboBox will display a list of items in a single column. So, only a single piece of information about the item can be displayed in an instance.

**Example:** Displaying a list of product names.

But a multicolumn combo box displays a list of items in multiple columns like in a grid view. So, it is used to display more information regarding an item in a single list.

**Example:** Let’s suppose a user wants to select a product based on its unit price and the units in stock. In that scenario, they want a multicolumn combo box. This provides a quick and detailed glance at all relevant information about a product. We may also display more information, like units on order and discounts, with multicolumn view support.

Let’s get started creating a multicolumn combo box component in Blazor.

## Prerequisites

- [Visual Studio 2019](https://visualstudio.microsoft.com/vs/)
- [.NET Core 3.0](https://dotnet.microsoft.com/download/dotnet-core/3.0) or above

## Create a Blazor WebAssembly application

In this example, we are going to display the following information regarding the products:

- Product ID
- Name
- Unit price
- Units in stock
- Units on order

**Step 1:** [Create a Blazor WebAssembly app](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly/)
 and add the required models and controller classes. We will have three project files created inside this solution:

- **Client:** Contains the client-side code and the pages that will be rendered on the browser.
- **Server:** Contains the server-side code, such as DB-related operations and the web API.
- **Shared:** Contains the shared code that can be accessed by both client and server.

**Step 2:** Now, create a new model class file inside the Shared project with the name ** Product**. In this class file, we are going to access the Client and Server projects for data binding.

```
    public class Product
    {
        public int? ProductID { get; set; }
        public string ProductName { get; set; }
        public int? SupplierID { get; set; }
        public double? UnitPrice { get; set; }
        public int UnitsInStock { get; set; }
        public int UnitsOnOrder { get; set; }
    }
```

**Step 3:** After creating the model class, add the ** web API controller** to the ** Server project** with the name ** ProductController**. In this controller file, I have included the ** Get methods** to generate appropriate data, which you can reference from this [GitHub](https://github.com/SyncfusionExamples/Multi-column-ComboBox-Blazor)
 repository.

```
    [Route("[controller]")]
    [ApiController]
    public class ProductController : ControllerBase
    {
        // GET: api/Product
        [HttpGet]
        public IEnumerable Get()
        {
            List ProductsList = new List
            {
                new Product{ProductID=1, ProductName="Chai", UnitPrice=18.0000, SupplierID=1, UnitsInStock=39, UnitsOnOrder=0 },
                new Product {ProductID=2, ProductName="Chang", UnitPrice=19.000, SupplierID=2, UnitsInStock=17, UnitsOnOrder=49},
                new Product{ProductID=10, ProductName="Queso Manchego La Pastora", UnitPrice=26.000, SupplierID=1, UnitsInStock=12, UnitsOnOrder=20}
            };
            return ProductsList;
        }
    }    
```

## Adding ComboBox and configuring multiple columns

To achieve multicolumn support in ComboBox, we should add the Syncfusion Blazor ComboBox component to the created Blazor WebAssembly app.

**Step 1:** Add the following code example in the ** index.razor** file to create a simple ComboBox along with product data binding.

```
<SfComboBox TValue="string" TItem="Product" PopupWidth="700px" DataSource="@_productsList" PopupHeight="400px" Placeholder="Select a Product">
    <ComboBoxFieldSettings Text="ProductName" Value="ProductID"></ComboBoxFieldSettings>
</SfComboBox> 
```

**Step 2:** Now, we need to display the pop-up list item in multicolumn view to show more information when the user opens the pop-up of the ComboBox. To do so, use the [item template](https://blazor.syncfusion.com/documentation/combobox/templates/?no-cache=1#item-template)
 to display column data in table view and the [header template](https://blazor.syncfusion.com/documentation/combobox/templates/?no-cache=1#header-template)
 to display the table of column names.

```
<SfComboBox TValue="string" TItem="Product" PopupWidth="700px" DataSource="@_productsList" PopupHeight="400px" CssClass="e-multi-column" Placeholder="Select a Product">
   <ComboBoxTemplates TItem="Product">
      <HeaderTemplate>
         <table><tr><th class="e-text-center">Product ID</th><th width="240px">Product Name</th><th>Unit Price</th><th>Units In Stock</th><th>Units On Order</th></tr></table>
      </HeaderTemplate>
      <ItemTemplate>
         <table><tbody><tr><td class="e-text-center">@((context as Product).ProductID)</td><td width="240px">@((context as Product).ProductName)</td><td>@((context as Product).UnitPrice)</td><td>@((context as Product).UnitsInStock)</td><td>@((context as Product).UnitsOnOrder)</td></tr> </tbody></table>
      </ItemTemplate>
   </ComboBoxTemplates>
   <ComboBoxFieldSettings Text="ProductName" Value="ProductID"></ComboBoxFieldSettings>
</SfComboBox>
```

**Step 3:** We have provided the multicolumn style class in the built-in Syncfusion Blazor theme files. Here, we need to give the multicolumn root class name “** e-multi-column**” in the ** CssClass** API, like in the following code example.

```
<SfComboBox CssClass="e-multi-column" TValue="string" TItem="Product" DataSource="@_productsList">
    <ComboBoxFieldSettings Text="ProductName" Value="ProductID"></ComboBoxFieldSettings>
</SfComboBox>             
```

**Step 4:** Next, get the data from the product service and bind it to the ComboBox ** DataSource** API with the OnInitializedAsync method.

```
@code{

    private Product[] _productsList;

    protected override async Task OnInitializedAsync()
    {
        _productsList = await Http.GetJsonAsync<Product[]>("Product");
    }
}
```

After executing the previous code examples, we’ll get output like the following screenshot. See how it displays the ComboBox list items information in the multicolumn view.  
 ![output of Multicolumn ComboBox](https://www.syncfusion.com/blogs/wp-content/uploads/2020/06/output-of-Multicolumn-ComboBox.png)

## Display customized information

Now, we can display the custom text alignment in each column using a built-in class, like in the following code example:

- **e-text-center**: Displays the text in center of the column.
- **e-text-right**: Displays the text in right side of the column.
- **e-text-left**: Displays the text in left side of the column.

```
<HeaderTemplate>
    <table><tr><th class="e-text-center">Product ID</th></tr></table>
</HeaderTemplate>
<ItemTemplate>
     <table><tbody><tr><td class="e-text-center">@((context as Product).ProductID)</td></tr> </tbody></table>
</ItemTemplate>        
```

## Conclusion

I hope you can now add and display a multicolumn view in the [ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox)
 drop-down. You can easily customize the pop-up and list the items using the template option, which you can learn more about from this [demo](https://blazor.syncfusion.com/demos/combobox/multi-column?theme=bootstrap4)
.You can download the complete source code of this example from the [GitHub](https://github.com/SyncfusionExamples/Multi-column-ComboBox-Blazor)
 repository.

Try our [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox)
 component by downloading a [free 30-day trial](https://www.syncfusion.com/account/manage-trials/downloads)
 or see our [NuGet package](https://www.nuget.org/packages/Syncfusion.Blazor)
. Feel free to have a look at our [online examples](https://blazor.syncfusion.com/demos/combobox/default-functionalities?theme=bootstrap4)
 and [documentation](https://blazor.syncfusion.com/documentation/combobox/getting-started/)
 to explore other available features.

If you have any questions, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums/blazor-components)
, [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/newincident)
, or [feedback portal](https://www.syncfusion.com/feedback/blazor-components)
. We are always happy to assist you!