New to Telerik UI for ASP.NET Core? Download free 30-day trial

Templates

The AutoComplete provides full control over the way an item, the popup header and the popup footer 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 AutoComplete.

Basic Usage

The following example demonstrates how to customize the AutoComplete by declaring an inline string.

    @(Html.Kendo().AutoComplete()
        .Name("customers")
        .DataTextField("ContactName")
        .Template("<span><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Template_GetCustomers", "Home");
            });
        })
    )
<kendo-autocomplete name="customers"
                    datatextfield="ContactName"
                    template="<span><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>">
    <datasource>
        <transport>
            <read url="@Url.Action("Template_GetCustomers", "Home")" />
        </transport>
    </datasource>

</kendo-autocomplete>

The following example demonstrates how to customize the AutoComplete by referencing a script tag by its id.

    @(Html.Kendo().AutoComplete()
        .Name("customers")
        .DataTextField("ContactName")
        .TemplateId("itemTemplate") //Reference to the template
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Template_GetCustomers", "Home");
            });
        })
    )
<kendo-autocomplete name="customers"
                    datatextfield="ContactName"
                    template-id="itemTemplate">
    <datasource>
        <transport>
            <read url="@Url.Action("Template_GetCustomers", "Home")" />
        </transport>
    </datasource>

</kendo-autocomplete>
    <script id="itemTemplate" type="text/x-kendo-template">
        ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
    </script>

Item Template

The item template manages the way the list items of a AutoComplete are rendered.

The following example demonstrates how to define an item template and how to evaluate it against the dataItem.

    @(Html.Kendo().AutoComplete()
        .Name("customers")
        .DataTextField("ContactName")
        .TemplateId("itemTemplate") // Reference to the template.
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Template_GetCustomers", "Home");
            });
        })
    )
<kendo-autocomplete name="customers"
                    datatextfield="ContactName"
                    template-id="itemTemplate">
    <datasource>
        <transport>
            <read url="@Url.Action("Template_GetCustomers", "Home")" />
        </transport>
    </datasource>

</kendo-autocomplete>
  <script id="itemTemplate" type="text/x-kendo-template">
        ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
    </script>

Header Template

The header template manages the way the popup header of a AutoComplete is rendered.

    @(Html.Kendo().AutoComplete()
        .Name("customers")
        .DataTextField("ContactName")
        .HeaderTemplateId("headerTemplate") // Reference to the template.
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Template_GetCustomers", "ComboBox");
            });
        })
    )
<kendo-autocomplete name="customers"
                    datatextfield="ContactName"
                    header-template-id="headerTemplate">
    <datasource>
        <transport>
            <read url="@Url.Action("Template_GetCustomers", "ComboBox")" />
        </transport>
    </datasource>

</kendo-autocomplete>
    <script id="headerTemplate" type="text/x-kendo-template">
        <strong>Header</strong>
    </script>

The footer template manages the way the popup footer of a AutoComplete 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().AutoComplete()
        .Name("customers")
        .DataTextField("ContactName")
        .FooterTemplateId("footerTemplate") // Reference to the template.
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Template_GetCustomers", "Home");
            });
        })
    )
<kendo-autocomplete name="customers"
                    datatextfield="ContactName"
                    footer-template-id="footerTemplate">
    <datasource>
        <transport>
            <read url="@Url.Action("Template_GetCustomers", "Home")" />
        </transport>
    </datasource>

</kendo-autocomplete>

    <script id="footerTemplate" type="text/x-kendo-template">
        Total <strong>#: instance.dataSource.total() #</strong> items found
    </script>

No-Data Templates

The AutoComplete displays noDataTemplate in the popup when the data source is empty.

    @(Html.Kendo().AutoComplete()
        .Name("customers")
        .DataTextField("ContactName")
        .NoDataTemplateId("noDataTemplate") // Reference to the template.
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Template_GetCustomers", "Home");
            });
        })
    )
<kendo-autocomplete name="customers"
                    datatextfield="ContactName"
                    no-data-template-id="noDataTemplate">
    <datasource>
        <transport>
            <read url="@Url.Action("Template_GetCustomers", "Home")" />
        </transport>
    </datasource>

</kendo-autocomplete>

    <script id="noDataTemplate" type="text/x-kendo-template">
        <strong>No Data!</strong>
    </script>

See Also

In this article