Templates

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

Item Templates

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

The following example demonstrates how to define an item template.

<input id="autoComplete" />
<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
    ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
</script>

<!-- AutoComplete initialization -->
<script>
    $(document).ready(function() {
        $("#autoComplete").kendoAutoComplete({
            template: $("#scriptTemplate").html(),
            dataTextField: "ContactName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

Header Templates

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

<input id="autoComplete" />
<!-- Template -->
<script id="headerTemplate" type="text/x-kendo-template">
    <strong>Header</strong>
</script>

<!-- AutoComplete initialization -->
<script>
    $(document).ready(function() {
        $("#autoComplete").kendoAutoComplete({
            headerTemplate: $("#headerTemplate").html(),
            dataTextField: "ContactName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

The footer template manages the way the popup footer of an AutoComplete is rendered. The footer is re-rendered on every change of the Data Source. The context of the template is the widget itself.

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

<!-- AutoComplete initialization -->
<script>
    $(document).ready(function() {
        $("#autoComplete").kendoAutoComplete({
            footerTemplate: $("#footerTemplate").html(),
            dataTextField: "ContactName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

No-Data Templates

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

When the noDataTemplate option is defined, the AutoComplete always opens its popup element.

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

<!-- AutoComplete initialization -->
<script>
    $(document).ready(function() {
        $("#autoComplete").kendoAutoComplete({
            noDataTemplate: $("#noDataTemplate").html(),
            dataTextField: "ContactName",
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "https://demos.telerik.com/kendo-ui/service/Customers"
                    }
                }
            }
        });
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article