Kendo UI : Autocomplete Template Header

Question

I'm new to Kendo UI. I can't figure out why my autocomplete is not showing the header template.The row template is working fine. I looked at the example and I'm not sure what I'm doing differently

Here is my JavaScript code:

<script>
$(document).ready(function () {
    $("#drug_name").kendoAutoComplete({
        dataTextField: "name",
        change: function (e) {
            if ($("#drug_name").val() == "") {
                $("#dose").val("");
                $("#unit").val("");
                $("#route").val("");
            }

        },
        select: function (e) {
            var dataItem = this.dataItem(e.item.index());

            $("#dose").val(dataItem.dose);
            $("#unit").val(dataItem.unit);
            $("#route").val(dataItem.route);

            //output selected dataItem
            console.log(kendo.stringify(dataItem));
        },
        headerTemplate: '<div class="dropdown-header"><span class="k-widget k-header">Name</span><span class="k-widget k-header">Route</span><span class="k-widget k-header">Dose</span><span class="k-widget k-header">Unit</span></div>',
        template: '<span class="k-state-default">#:data.name#</span><span class="k-state-default">#:data.route#</span><span class="k-state-default">#:data.dose#</span><span class="k-state-default">#:data.unit#</span>',
        filter: "contains",
        minLength: 3,
        dataSource: {
            serverFiltering: true,
            transport: {
                read: { url: "/Medication/Load", dataType: "json" },
                parameterMap: function (data, action) {
                    if (action === "read") {
                        return {
                            medicationName: data.filter.filters[0].value
                        };
                    } else {
                        return data;
                    }
                }
            }
        },
        height: 370
    });
});

Answer 1

Please try to write like this:

 headerTemplate: '<div class="dropdown-header">' + '<span class="k-widget k-header">Name</span>' + '<span class="k-widget k-header">Route</span>' + '<span class="k-widget k-header">Dose</span>' + <span class="k-widget k-header">Unit</span>' + '</div>',