MultiColumnComboBox Columns

This article explains how to show data in the dropdown columns of the MultiColumnComboBox.

Bind Data To The Columns

To bind data to the <MultiColumnComboBoxColumn> you can use the Field. This parameter points to the (case-sensitive) name of field in the data source that the column will render as a string. You can set it in plain text (Field="SomeField") or let .NET extract the field name from the model (Field="@nameof(MyModelClass.Field)").

Parameters

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

Parameter	Type	Description
Field	string	Points to the name of field in the data source that the column will render as a string (case-sensitive).
Width	string	Defines the width of the MultiColumnComboBox column.
Class	string	The CSS class that will be rendered on the column's content cells.
HeaderClass	string	The CSS class that will be rendered on the column's header cell.
Title	string	The string title rendered in the column header. If it is not explicitly declared the value of the Field will be rendered.
HeaderTemplate	RenderFragment	The HeaderTemplate allows you to control the rendering of the column's header cell. Read more in the Templates article.
Template	RenderFragment<object>	The Template allows you to control the rendering of the column's cells. Read more in the Templates article.

MultiColumnComboBoxColumn with its features

<TelerikMultiColumnComboBox Data="@MultiComboData"
                            @bind-Value="@BoundValue"
                            ValueField="@nameof(SampleData.Id)"
                            TextField="@nameof(SampleData.Name)"
                            Width="300px">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(SampleData.Id)"
                                   Title="The id"
                                   Class="id-cell-class"
                                   HeaderClass="id-header-class"
                                   Width="300px">
        </MultiColumnComboBoxColumn>
        <MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)"
                                   Title="The name"
                                   Class="name-cell-class"
                                   HeaderClass="name-header-class"
                                   Width="300px">
        </MultiColumnComboBoxColumn>
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

@code {
    public int BoundValue { get; set; }

    public List<SampleData> MultiComboData { get; set; } = Enumerable.Range(0, 30).Select(x => new SampleData()
        {
            Id = x,
            Name = "Name " + x
        }).ToList();

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

<style>
    .id-cell-class {
        font-weight: bold;
        font-style: italic;
    }

    .id-header-class {
        font-weight: bold;
        color: blue;
    }

    .name-cell-class {
        color: darkslategray;
        font-weight: bolder;
    }

    .name-header-class {
        font-weight: bold;
        background-color: lightblue;
    }
</style>

See Also

• Templates
• Use Custom MultiColumnComboBox with Grid