将 Kendo Grid 数据与下拉值绑定答案

【问题标题】：Bind Kendo Grid data with dropdown value将 Kendo Grid 数据与下拉值绑定
【发布时间】：2016-06-07 08:07:07
【问题描述】：

我在页面上有 kendo 下拉列表，它正在从数据库中获取结果，如下所示。我同时在同一页面上也有一个网格，它需要剑道下拉列表值，即来自年份下拉列表的值，但我无法同时获得它。这就是我关注的方式。我在哪里做错了。

<script type="text/javascript">

 var GridUrl;

    $("#Years").kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Id",

        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: "../../Service/GetYears"

                }
            }
        }
    });



   $(document).ready(function () {
BindGridData();
  GridUrl = '@Url.Action("Read", "Home")';

});

function BindGridData()
{
            GridDataSource = new kendo.data.DataSource({
            type: "aspnetmvc-ajax",
            serverFiltering: true,
            serverPaging: true,
            serverSorting: true,
            pageSize: 10,
            transport: {
                read: {
                    url: GridUrl,
                    data: { year: $('#Years').val() }
                }
            },
            schema: {
                data: "Data", total: "Total"
            }
        });
}

【问题讨论】：

标签： kendo-ui kendo-grid kendo-dropdown

【解决方案1】：

换行

year: $('#Years').data("kendoDropDownList").value()

应该做一个伎俩。您需要获取 kendoDropDownListwidget 的实例才能获取其值。您需要这样做，因为kendoDropDownListwidget 值不会直接保存到html 元素中

【讨论】：

【解决方案2】：

首先，您需要将kendoDropDownList 的初始化移动到文档就绪函数中。如果不这样做，您最终可能会引用尚未加载的元素。

应该做的第二个更改是如何从kendoDropDownList 获取值。通常，您应该引用小部件而不是 DOM 元素：$('#Years').data("kendoDropDownList").value()

最后，您没有提及绑定网格的方式和时间，但如果用户更改下拉值，您可能希望刷新网格数据。如果是这种情况，您可能需要使用下拉列表的change 事件来刷新网格数据。

$(document).ready(function () {

    $("#Years").kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Id",
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: "../../Service/GetYears"
                }
            }
        },
        change: function(e) {
            $("#YourGrid").data("kendoGrid").dataSource.read();
        }
    });

    BindGridData();
    GridUrl = '@Url.Action("Read", "Home")';

});

function BindGridData() {
    GridDataSource = new kendo.data.DataSource({
        type: "aspnetmvc-ajax",
        serverFiltering: true,
        serverPaging: true,
        serverSorting: true,
        pageSize: 10,
        transport: {
            read: {
                url: GridUrl,
                data: { year: $('#Years').data("kendoDropDownList").value() }
            }
        },
        schema: {
            data: "Data", total: "Total"
        }
    });
}

【讨论】：