Templates
The DropDownList 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 DropDownList.
Basic Usage
The following example demonstrates how to customize the DropDownList by declaring an inline string.
@(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");
});
})
)The following example demonstrates how to customize the DropDownList by referencing a script tag by its id.
@(Html.Kendo().DropDownList()
.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 DropDownList 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");
});
})
)Value Templates
The value template manages the way the selected value of a DropDownList is rendered.
Include only HTML elements in the value templates.
@(Html.Kendo().DropDownList()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.ValueTemplateId("valueTemplate") // Reference to the template.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Template_GetCustomers", "ComboBox");
});
})
)Header Templates
The header template manages the way the pop-up header of a DropDownList is rendered.
@(Html.Kendo().DropDownList()
.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 pop-up footer of a DropDownList 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().DropDownList()
.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 DropDownList displays noDataTemplate in the popup when the data source is empty.
When the
noDataTemplateoption is defined, the DropDownList always opens the popup element.
@(Html.Kendo().DropDownList()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.NoDataTemplateId("noDataTemplate") // Reference to the template.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Template_GetCustomers", "ComboBox");
});
})
)Option Label Template
The DropDownList displays an OptionLabelTemplate when the OptionLabel has been set. Use OptionLabelTemplate if you want to customize the markup of the optionLabel.
If the
OptionLabelis defined as an object, the object must contain the model properties corresponding to theDataValueFieldandDataTextFieldoptions. For example,OptionLabel(new { ContactName = "Select address", CustomerID = 0 }). Otherwise, the component will showundefined.
@(Html.Kendo().DropDownList()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.OptionLabel("Select address...")
.OptionLabelTemplate("<span style='color: red'>Select address...</span>")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Template_GetCustomers", "ComboBox");
});
})
)