Templates
The ComboBox provides full control over the way an item, a selected value, or a pop-up header is rendered through the Kendo UI for jQuery templates.
For more information on the capabilities and syntax of the templates, refer to this documentation article. For a runnable example, refer to the demo on customizing the templates in the ComboBox.
Basic Usage
The following example demonstrates how to customize the ComboBox by referencing a script tag by its id.
@(Html.Kendo().ComboBox() .Name("customers") .DataTextField("ContactName") .DataValueField("CustomerID") .TemplateId("itemTemplate") // Reference to the template. .DataSource(source => { source.Read(read => { read.Action("Template_GetCustomers", "ComboBox"); }); }) )The following example demonstrates how to customize the ComboBox by declaring an inline string.
@(Html.Kendo().ComboBox() .Name("customers") .DataTextField("ContactName") .DataValueField("CustomerID") .Template("<span><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>") .DataSource(source => { source.Read(read => { read.Action("Template_GetCustomers", "ComboBox"); }); }) )Item Template
The item template manages the way the list items of a ComboBox are rendered.
The following example demonstrates how to define an item template and how to evaluate it against the dataItem.
@(Html.Kendo().DropDownList() .Name("customers") .DataTextField("ContactName") .DataValueField("CustomerID") .TemplateId("itemTemplate") // Reference to the template. .DataSource(source => { source.Read(read => { read.Action("Template_GetCustomers", "ComboBox"); }); }) )Header Templates
The header template manages the way the popup header of a ComboBox is rendered.
@(Html.Kendo().ComboBox() .Name("customers") .DataTextField("ContactName") .DataValueField("CustomerID") .HeaderTemplateId("headerTemplate") // Reference to the template. .DataSource(source => { source.Read(read => { read.Action("Template_GetCustomers", "ComboBox"); }); }) )Footer Templates
The footer template manages the way the popup footer of a ComboBox is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the widget itself.
@(Html.Kendo().ComboBox() .Name("customers") .DataTextField("ContactName") .DataValueField("CustomerID") .FooterTemplateId("footerTemplate") // Reference to the template. .DataSource(source => { source.Read(read => { read.Action("Template_GetCustomers", "ComboBox"); }); }) )No-Data Templates
The ComboBox displays noDataTemplate in the popup when the data source is empty.
@(Html.Kendo().ComboBox() .Name("customers") .DataTextField("ContactName") .DataValueField("CustomerID") .NoDataTemplateId("noDataTemplate") //Reference to the template .DataSource(source => { source.Read(read => { read.Action("Template_GetCustomers", "ComboBox"); }); }) )