Templates
The MultiSelect provides full control over the way items, tags, or a pop-up header is rendered through the Kendo UI for jQuery templates.
Basic Usage
The following example demonstrates how to customize the MultiSelect by referencing a script tag by its id.
<!-- Template -->
<script id="itemTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
</script>
<!-- MultiSelect initialization -->
@(Html.Kendo().MultiSelect()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.ItemTemplateId("itemTemplate") //Reference to the template
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Customers_Read", "MultiSelect");
});
})
)
<!-- Template -->
<script id="itemTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
</script>
<!-- MultiSelect initialization -->
<kendo-multiselect name="customers"
datatextfield="ContactName"
datavaluefield="CustomerID"
item-template-id="itemTemplate">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("Customers_Read", "MultiSelect")" />
</transport>
</datasource>
</kendo-multiselect>
The following example demonstrates how to customize the MultiSelect by declaring an inline string.
@(Html.Kendo().MultiSelect()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.ItemTemplate("<span><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Customers_Read", "MultiSelect");
});
})
)
<kendo-multiselect name="customers"
datatextfield="ContactName"
datavaluefield="CustomerID"
item-template="<span><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("Customers_Read", "MultiSelect")" />
</transport>
</datasource>
</kendo-multiselect>
Item Template
The item template manages the way the list items of a MultiSelect are rendered.
The following example demonstrates how to define an item template and how to evaluate it against the dataItem.
<!-- Template -->
<script id="itemTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
</script>
<!-- MultiSelect initialization -->
@(Html.Kendo().MultiSelect()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.ItemTemplateId("itemTemplate") // Reference to the template.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Customers_Read", "MultiSelect");
});
})
)
<!-- Template -->
<script id="itemTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
</script>
<!-- MultiSelect initialization -->
<kendo-multiselect name="customers"
datatextfield="ContactName"
datavaluefield="CustomerID"
item-template-id="itemTemplate">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("Customers_Read", "MultiSelect")" />
</transport>
</datasource>
</kendo-multiselect>
Tag Template
The tag template manages the way the tag of a MultiSelect is rendered.
The following example demonstrates how to define a tag template.
<!-- Template -->
<script id="tagTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#
</script>
<!-- MultiSelect initialization -->
@(Html.Kendo().MultiSelect()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.TagTemplateId("tagTemplate") // Reference to the template.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Customers_Read", "MultiSelect");
});
})
)
<!-- Template -->
<script id="tagTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#
</script>
<!-- MultiSelect initialization -->
<kendo-multiselect name="customers"
datatextfield="ContactName"
datavaluefield="CustomerID"
tag-template-id="tagTemplate">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("Customers_Read", "MultiSelect")" />
</transport>
</datasource>
</kendo-multiselect>
Header Template
The header template manages the way the pop-up header of a MultiSelect is rendered.
The following example demonstrates how to define a header template.
<!-- Template -->
<script id="headerTemplate" type="text/x-kendo-template">
<strong>Header</strong>
</script>
<!-- MultiSelect initialization -->
@(Html.Kendo().MultiSelect()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.HeaderTemplateId("headerTemplate") // Reference to the template.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Customers_Read", "MultiSelect");
});
})
)
<!-- Template -->
<script id="headerTemplate" type="text/x-kendo-template">
<strong>Header</strong>
</script>
<!-- MultiSelect initialization -->
<kendo-multiselect name="customers"
datatextfield="ContactName"
datavaluefield="CustomerID"
header-template-id="headerTemplate">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("Customers_Read", "MultiSelect")" />
</transport>
</datasource>
</kendo-multiselect>
Footer Template
The footer template manages the way the pop-up footer of a MultiSelect is rendered. The footer is re-rendered on every change of the DataSource. The context of the template is the widget itself.
The following example demonstrates how to define a footer template.
<!-- Template -->
<script id="footerTemplate" type="text/x-kendo-template">
Total <strong>#: instance.dataSource.total() #</strong> items found
</script>
<!-- MultiSelect initialization -->
@(Html.Kendo().MultiSelect()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.FooterTemplateId("footerTemplate") // Reference to the template.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Customers_Read", "MultiSelect");
});
})
)
<!-- Template -->
<script id="footerTemplate" type="text/x-kendo-template">
Total <strong>#: instance.dataSource.total() #</strong> items found
</script>
<!-- MultiSelect initialization -->
<kendo-multiselect name="customers"
datatextfield="ContactName"
datavaluefield="CustomerID"
footer-template-id="footerTemplate">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("Customers_Read", "MultiSelect")" />
</transport>
</datasource>
</kendo-multiselect>
No-Data Templates
The MultiSelect displays noDataTemplate in the popup when the data source is empty.
The following example demonstrates how to define a noDataTemplate template.
<!-- Template -->
<script id="noDataTemplate" type="text/x-kendo-template">
<strong>No Data!</strong>
</script>
<!-- MultiSelect initialization -->
@(Html.Kendo().MultiSelect()
.Name("customers")
.DataTextField("ContactName")
.DataValueField("CustomerID")
.NoDataTemplateId("noDataTemplate") // Reference to the template.
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Customers_Read", "MultiSelect");
});
})
)
<!-- Template -->
<script id="noDataTemplate" type="text/x-kendo-template">
<strong>No Data!</strong>
</script>
<!-- MultiSelect initialization -->
<kendo-multiselect name="customers"
datatextfield="ContactName"
datavaluefield="CustomerID"
no-data-template-id="noDataTemplate">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("Customers_Read", "MultiSelect")" />
</transport>
</datasource>
</kendo-multiselect>