Kendo UI 网格工具栏模板下拉选择器错误（文本框而不是下拉菜单）

Question

Example 我一直在考虑让它工作，但到目前为止，我得到的不是下拉菜单，而是空文本框，它什么也没做。

下面是我现在的代码：-

@section js {
<script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <label class="category-label" for="external">Show checks by ex:</label>
        <input type="search" id="external" style="width: 230px"></input>
    </div>
</script>
<script type="text/javascript">
    var theGrid;
    $().ready(function () {
        $('#listDiv').kendoGrid({
            dataSource: {
                type: 'json',
                serverPaging: true,
                pageSize: 10,
                transport: {
                    read: {
                        url: '@Url.Action("_IList", "Entry", new { @ExId = Model.ExId })',
                        data: { ignore: Math.random() }
                    }
                },
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            Id: { type: 'number' },
                            Name: { type: 'string' },
                            Ex: { type: 'string' },
                            Date: { type: 'string' },
                            Check1: { type: 'string' },
                            Check2: { type: 'string' },
                            Check3: { type: 'string' },
                            Check4: { type: 'string' },
                            Check5: { type: 'string' },
                            Edit: { type: 'string' }
                        }
                    },
                    data: "Data",
                    total: "Count"
                }
            },
            scrollable: false,
            toolbar: kendo.template($("#template").html()),
            columns:
                [
                    {
                        field: 'Name'
                    },
                    {
                        field: 'Ex'
                    },
                    {
                        field: 'Date'
                    },
                    {
                        template: '#=Template1#' + sitePath + '#=Patient1#',
                        field: 'Patient1',
                        title: 'Patient 1',
                        width: 50
                    },
                    {
                        template: '#=Template2#' + sitePath + '#=Patient2#',
                        field: 'Patient2',
                        title: 'Patient 2',
                        width: 50
                    },
                    {
                        template: '#=Template3#' + sitePath + '#=Patient3#',
                        field: 'Patient3',
                        title: 'Patient 3',
                        width: 50
                    },
                    {
                        template: '#=Template4#' + sitePath + '#=Patient4#',
                        field: 'Patient4',
                        title: 'Patient 4',
                        width: 50
                    },
                    {
                        template: '#=Template5#' + sitePath + '#=Patient5#',
                        field: 'Patient5',
                        title: 'Patient 5',
                        width: 50
                    }

                ],
            pageable: true
        });
        var dropDown = grid.find("#external").kendoDropDownList({
            dataTextField: "ExName",
            dataValueField: "ExId",
            autoBind: false,
            optionLabel: "All",
            dataSource: {
                type: "json",
                severFiltering: true,
                transport: {
                    url: '@Url.Action("_Ex", "Entry")',
                    data: { ignore: Math.random() }
                }
            },
            change: function () {
                var value = this.value();
                if (value) {
                    grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
                } else {
                    grid.data("kendoGrid").dataSource.filter({});
                }
            }
        });
        theGrid = $('#listDiv').data('kendoGrid');
    });        
</script>
<style scoped="scoped">
    #grid .k-toolbar
    {
        min-height: 27px;
    }
    .external-label
    {
        vertical-align: middle;
        padding-right: .5em;
    }
    #external
    {
        vertical-align: middle;
    }
    .toolbar {
        float: right;
        margin-right: .8em;
    }
</style>
}
<h2>Check Lists</h2>

<div id="listDiv"></div>
<br />

它可以显示每个 Ex 的所有检查列表，我可以在上一页上选择这些检查列表并将字符串 Id 传递给这个，但我希望能够弄清楚工具栏模板有什么问题一页上的功能而不是分布在两页上的功能要好得多。

任何帮助/指导将不胜感激。

编辑：

我也确实找到了其他遇到此问题的人，但他们没有得到论坛回复。 Example 2

Answer 1

您提到其他人遇到了问题并且没有收到回复，但是链接的论坛帖子确实包含对此问题的回复和答案。在那种特殊情况下，页面上发生了 Javascript 错误，导致下拉菜单无法正确初始化，我相信您自己也是如此。

虽然由于没有有效的数据源而无法完全正常工作，但我将您的示例代码转储到 jsFiddle 中，并且（在修复了一些 JS 错误之后）您可以看到下拉列表看起来非常好。

特别是，关于 grid 和 sitePath 未定义的错误导致下拉菜单无法初始化。

    var grid;
    var sitePath = '';
    $().ready(function () {
        grid = $('#listDiv').kendoGrid({
            dataSource: {
                type: 'json',
                serverPaging: true,
                pageSize: 10,
                transport: {
                    read: {
                        url: '',
                        data: { ignore: Math.random() }
                    }
                },
                schema: {
                    model: {
                        id: 'Id',
                        fields: {
                            Id: { type: 'number' },
                            Name: { type: 'string' },
                            Ex: { type: 'string' },
                            Date: { type: 'string' },
                            Check1: { type: 'string' },
                            Check2: { type: 'string' },
                            Check3: { type: 'string' },
                            Check4: { type: 'string' },
                            Check5: { type: 'string' },
                            Edit: { type: 'string' }
                        }
                    },
                    data: "Data",
                    total: "Count"
                }
            },
            scrollable: false,
            toolbar: kendo.template($("#template").html()),
            columns:
                [
                    {
                        field: 'Name'
                    },
                    {
                        field: 'Ex'
                    },
                    {
                        field: 'Date'
                    },
                    {
                        template: '#=Template1#' + sitePath + '#=Patient1#',
                        field: 'Patient1',
                        title: 'Patient 1',
                        width: 50
                    },
                    {
                        template: '#=Template2#' + sitePath + '#=Patient2#',
                        field: 'Patient2',
                        title: 'Patient 2',
                        width: 50
                    },
                    {
                        template: '#=Template3#' + sitePath + '#=Patient3#',
                        field: 'Patient3',
                        title: 'Patient 3',
                        width: 50
                    },
                    {
                        template: '#=Template4#' + sitePath + '#=Patient4#',
                        field: 'Patient4',
                        title: 'Patient 4',
                        width: 50
                    },
                    {
                        template: '#=Template5#' + sitePath + '#=Patient5#',
                        field: 'Patient5',
                        title: 'Patient 5',
                        width: 50
                    }

                ],
            pageable: true
        });
        var dropDown = grid.find("#external").kendoDropDownList({
            dataTextField: "ExName",
            dataValueField: "ExId",
            autoBind: false,
            optionLabel: "All",
            dataSource: {
                type: "json",
                severFiltering: true,
                transport: {
                    url: '@Url.Action("_Ex", "Entry")',
                    data: { ignore: Math.random() }
                }
            },
            change: function () {
                var value = this.value();
                if (value) {
                    grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
                } else {
                    grid.data("kendoGrid").dataSource.filter({});
                }
            }
        });
        theGrid = $('#listDiv').data('kendoGrid');
    });