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传递给这个，但我希望能够找出工具栏模板有什么问题。 1页上的功能而不是2上的功能更为可取。

非常感谢任何帮助/指导。

编辑：

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

Answer 1

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

虽然由于没有有效的数据源而没有完全正常工作，但是我将你的示例代码转储到jsFiddle并且（在修复了一些JS错误之后），你可以看到下拉列表显示为绝对正常。 / p>

特别是，未定义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');
    });

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

1 个答案: