New to Telerik UI for Blazor? Start a free 30-day trial
MultiColumnComboBox Columns
Updated on Feb 11, 2025
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>