Templates
The MultiColumnComboBox provides full control over the way the items are displayed. In addition, the component supports template options for customizing the header and footer of its pop-up.
For more information on the capabilities and syntax of the templates, refer to the Kendo UI templates article. For a runnable example, refer to the demo on customizing the templates in the MultiColumnComboBox.
Basic Usage
The following example demonstrates how to customize the .Template(), .HeaderTemplate() and .FooterTemplate() options provided by the MultiColumnComboBox.
@(Html.Kendo().MultiColumnComboBox()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.Columns(columns =>
{
columns.Add()
.Field("ContactName")
.Title("Name")
.Template("<span class=\"k-state-default photo\" style=\"background-image: url(" + Url.Content("~/shared/web/customers/") + "#:data.CustomerID#.jpg" + ");\" ></span>")
.HeaderTemplate("<span class=\"dropdown-header\">Photo</span>")
.Width("100px");
columns.Add()
.Field("CustomerID")
.Title("ID")
.Template("<span class=\"k-state-default\"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>")
.HeaderTemplate("<span class=\"dropdown-header\">Contact info</span>");
})
.FooterTemplate("Total <strong>#: instance.dataSource.total() #</strong> items found")
.HtmlAttributes(new { style = "width: 100%;" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Template_GetCustomers", "MultiColumnComboBox");
});
})
.Filter("startswith")
.Height(300)
)