MultiColumnComboBox Templates
The MultiColumnComboBox component allows you to change what is rendered in its header and footer through templates.
In this article:
Row
The RowTemplate allows you to control the rendering of each whole row in the dropdown. Use a row template if separate column templates do not allow enough customization.
You can access the context object and cast it to the bound model to employ some custom business logic. The contenxt represents the current data item for the row.
The MultiColumnComboBox items render as a list (
<ul>), not a<table>. Using table cells inside the row template is possible only if you render a complete table for each item. To mimic the default component appearance, use two sibling containers inside the<RowTemplate>with ak-table-tdCSS class.
Header Template
The HeaderTemplate controls the content that you can place above the list of items inside the dropdown element. It is always visible when the combobox is expanded. By default it is empty.
Footer Template
The FooterTemplate allows you to render content below the list of items inside the dropdownlist element. It is always visible when the dropdown is expanded. By default it is empty.
No Data Template
The NoDataTemplate controls the content of the popup element when the component does not have any items. By default, simply "No data" text is rendered.
Example
Using MultiColumnComboBox Templates
@* MultiColumnComboBox component with RowTemplate, HeaderTemplate, ItemTemplate, FooterTemplate and NoDataTemplate *@
<p>
<TelerikCheckBox @bind-Value="@IsDataAvailable" OnChange="@OnCheckBoxChangeHandler" />
MultiColumnComboBox has data
</p>
<TelerikMultiColumnComboBox Data="@MultiComboData"
@bind-Value="@SelectedProduct"
ValueField="@nameof(Product.Id)"
TextField="@nameof(Product.Name)"
Width="300px">
<HeaderTemplate>
<div style="text-align: center; padding: .3em;"><strong>Select one of the following:</strong></div>
</HeaderTemplate>
<RowTemplate Context="row">
<div class="k-table-td">
<em>@row.Name</em>
</div>
<div class="k-table-td" style="text-align: right;">
<strong>@row.Quantity</strong>
</div>
</RowTemplate>
<FooterTemplate>
<strong>Total items: @MultiComboData.Count()</strong>
</FooterTemplate>
<NoDataTemplate>
<div class="no-data-template">
<TelerikSvgIcon Size="@ThemeConstants.SvgIcon.Size.Large" Icon="@SvgIcon.FilesError"></TelerikSvgIcon>
<p>No items available</p>
</div>
</NoDataTemplate>
<MultiColumnComboBoxColumns>
<MultiColumnComboBoxColumn Field="@nameof(Product.Name)" Title="Product Name"></MultiColumnComboBoxColumn>
<MultiColumnComboBoxColumn Field="@nameof(Product.Quantity)" Title="In Stock"></MultiColumnComboBoxColumn>
</MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>
@code {
private int SelectedProduct { get; set; }
private bool IsDataAvailable { get; set; } = true;
private List<Product> MultiComboData { get; set; }
private List<Product> SourceData { get; set; }
protected override void OnInitialized()
{
var rnd = new Random();
SourceData = Enumerable.Range(1, 30).Select(x => new Product()
{
Id = x,
Name = $"Product {x}",
Quantity = rnd.Next(0, 30)
}).ToList();
MultiComboData = new List<Product>(SourceData);
base.OnInitialized();
}
private void OnCheckBoxChangeHandler()
{
if (IsDataAvailable)
{
MultiComboData = new List<Product>(SourceData);
}
else
{
MultiComboData = new List<Product>();
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public int Quantity { get; set; }
}
}