Blazor MultiColumnComboBox Overview

The Blazor MultiColumnComboBox enables users to select an option from a predefined set of choices in a dropdown grid layout. Users can also filter or group the available items, or enter custom values.

Creating MultiColumnComboBox

1. Use the <TelerikMultiColumnComboBox> tag.
2. Populate the Data parameter with the collection that you want to appear in the dropdown.
3. Set the TextField and ValueField parameters to point to the corresponding property names of the model.
4. [Bind the component Value](slug://get-started-value-vs-data-binding #value-binding) to a variable of the same type as the one of the ValueField.
5. Add MultiColumnComboBoxColumn instances under the MultiColumnComboBoxColumns tag. The Field parameter of each column must point to a property in the model.

MultiColumnComboBox data binding with two-way value binding

<TelerikMultiColumnComboBox Data="@MultiComboData"
                            @bind-Value="@SelectedProduct"
                            ValueField="@nameof(Product.Id)"
                            TextField="@nameof(Product.Name)"
                            Width="300px">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(Product.Name)" Title="Product Name"></MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="@nameof(Product.Quantity)" Title="In Stock"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

<p>Selected product Id: @SelectedProduct</p>

@code {
    private List<Product> MultiComboData { get; set; }

    private int SelectedProduct { get; set; }

    protected override void OnInitialized()
    {
        var rnd = new Random();

        MultiComboData = Enumerable.Range(1, 30).Select(x => new Product()
        {
            Id = x,
            Name = $"Product {x}",
            Quantity = rnd.Next(0, 30)
        }).ToList();

        base.OnInitialized();
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Quantity { get; set; }
    }
}

Data Binding

The Blazor MultiColumnComboBox requires a data source so that it can populate the dropdown with data. To provide a data source, use the Data property. Read more about the Blazor MultiColumnComboBox data binding....

The linked article also explains how the component behaves when the current value is not present in the data.

Columns

The MultiColumnComboBox renders its dropdown items in a grid-like column layout. Learn how to define and configure the Blazor MultiColumnComboBox columns...

Filtering

The MultiColumnComboBox has a built-in filter that narrows down the shown suggestions as the end-user types. To configure this feature, use the Filterable parameter. Additionally, you can choose between different filter operators and configure after how many symbols the list with suggestions will appear. Read more about the Blazor MultiColumnComboBox filtering....

Grouping

The MultiColumnComboBox enables you to group the listed suggestions into categories so you can help the end-user to browse faster through longer lists. Read more about the Blazor MultiColumnComboBox grouping....

Adornments

The component allows you to add custom elements as prefixes and suffixes. Read more about how to render custom adornments before and after the input element...

Templates

You can use the functionality of the built-in templates and customize the default rendering of the component. Read more about the Blazor MultiColumnComboBox templates....

Validation

You can ensure that the component value is acceptable by using the built-in validation. Read more about input validation....

Virtualization

By virtualizing the elements in the dropdown, you can use huge data sources without performance issues. The UI virtualization works with both local and remote data. Read more about the Blazor MultiColumnComboBox virtualization...

Adaptive Rendering

The component supports different popup rendering depending on the screen size. Read more about the Adaptive Rendering functionality and how to enable it...

MultiColumnComboBox Parameters

The MultiColumnComboBox provides various parameters that allow you to configure the component:

Parameter	Type and Default Value	Description
AdaptiveMode	AdaptiveMode (None)	The adaptive mode of the component.
AllowCustom	bool	Determines if the user can enter custom values. If enabled, the ValueField must be a string.
ShowClearButton	bool	Displays a clear button inside the input. When it is clicked, the Value will change to default(TValue), so there must be no item in the Data that has such a Value. For example, if TValue is int, there should be no data item with 0 in its ValueField, otherwise selection issues may occur.
Data	IEnumerable<TItem>	The component data.
DebounceDelay	int (150)	The time in milliseconds between the last typed symbol and the internal oninput event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries.
Enabled	bool	Whether the user can interact with the component.
ReadOnly	bool	If set to true, the component will be readonly and will not allow user input. The component is not readonly by default and allows user input.
Filterable	bool	Enables filtering for the end user.
FilterOperator	StringFilterOperator enum (StartsWith)	The filtering method.
Id	string	The id attribute of the <input class="k-input-inner" /> element. Use it to attach a <label for="..."> to the input.
LoaderShowDelay	int 300	Time in milliseconds between opening the popup and showing the loading skeleton in it when the data is not yet available.
Placeholder	string	The hint text the user sees when no item is selected. The placeholder will shown when the Value is set to the default value of the ValueField type. For example, 0 for int, and null for int? or string.
TItem	Type	The type of the model. Required if you can't provide Data or Value. Determines the type of the reference object.
TValue	Type	The type of the ValueField from the model. Required if you can't provide Data or Value. Determines the type of the reference object. The type of the values can be: - number (int, double, etc.) - string - Guid - Enum
Title	string	The title text rendered in the header of the popup(action sheet). Applicable only when AdaptiveMode is set to Auto.
TextField	string (Text)	The name of the model property that will be shown to the user.
ValueField	string (Value)	The name of the model property that will be the underlying component Value.
Value	TValue	The value of the component. Use the @bind-Value syntax for two-way binding.
TabIndex	int?	The tabindex attribute of the <input class="k-input-inner" /> element. Use it to customize the tabbing (focus) order on the page.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor MultiColumnComboBox:

Parameter	Type	Description
Class	string	The CSS class that will be rendered on the main wrapping element of the component. Use it to override the theme or apply custom styles.
Width	string	The width of the component. It will target both the dropdown and the main element if the dropdown has no specific width set. The default Width value is null, but the theme applies 100%. Use the Width property or custom CSS to set another value in any supported unit.

You can find more options for customizing the MultiColumnComboBox styling in the Appearance article.

Popup settings

The popup of the component can be additionally customized via nested tags:

RAZOR

<TelerikMultiColumnComboBox>
    <MultiColumnComboBoxSettings>
        <MultiColumnComboBoxPopupSettings Width="..." />
    </MultiColumnComboBoxSettings>
</TelerikMultiColumnComboBox>

The MultiColumnComboBox provides the following popup settings:

Parameter	Type	Description
AnimationDuration	int	The animation duration of the popup in milliseconds.
Class	string	Additional CSS class to customize the appearance of the popup.
MinWidth	string	The minimum width of the popup.
MaxWidth	string	The maximum width of the popup.
Width	string	The width of the popup. If you don't specify a value, the dropdown width will match the anchor element width which can help with responsive layouts and 100% widths.

Component Reference and Methods

To execute MultiColumnComboBox methods, obtain reference to the component instance via @ref.

The MultiColumnComboBox is a generic component. Its type depends on the type of its model and the type of its Value. In case you cannot provide either the Value or Data initially, you need to set the corresponding types to the TItem and TValue parameters.

The table below lists the MultiComboBox methods. Also consult the MultiColumnComboBox API.

Method	Description
Close	Closes the component dropdown.
FocusAsync	Focuses the component textbox.
Open	Opens the component dropdown.
Rebind	Refreshes the component data.
Refresh	Re-renders the component popup.

Using MultiColumnComboBox methods

<TelerikButton OnClick="@Open">Open MultiColumnComboBox</TelerikButton>

<TelerikMultiColumnComboBox @ref="@MultiColumnComboRef"
                            Data="@Products"
                            @bind-Value="@SelectedProduct"
                            ValueField="@nameof(Product.Id)"
                            TextField="@nameof(Product.Name)"
                            Width="300px">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(Product.Name)" Title="Product Name"></MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="@nameof(Product.Quantity)" Title="In Stock"></MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

@code {
    private TelerikMultiColumnComboBox<Product, int> MultiColumnComboRef { get; set; }

    private List<Product> Products { get; set; }

    private int SelectedProduct { get; set; }

    private void Open()
    {
        MultiColumnComboRef.Open();
        
        SelectedProduct = 3;

        MultiColumnComboRef.Refresh();
    }

    protected override void OnInitialized()
    {
        var rnd = new Random();

        Products = Enumerable.Range(1, 30).Select(x => new Product()
            {
                Id = x,
                Name = $"Product {x}",
                Quantity = rnd.Next(0, 30)
            }).ToList();

        base.OnInitialized();
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Quantity { get; set; }
    }
}

Next Steps

• Bind the MultiColumnComboBox to data
• Enable MultiColumnComboBox filtering
• Allow custom MultiColumnComboBox value

See Also

• Live Demo: MultiColumnComboBox
• Live Demo: MultiColumnComboBox Validation