Question

我是Kendo UI的新手。我无法弄清楚为什么我的自动填充功能没有显示标题模板。行模板工作正常。我查看了example，我不确定我的做法是什么

这是我的JavaScript代码：

<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

请尝试这样写：

 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>',

Kendo UI：自动完成模板标题

1 个答案: