Question

我在页面上有kendo下拉列表，它从数据库中获取结果，如下所示。我同时在同一页面上有一个网格需要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"
            }
        });
}

Answer 1

将行更改为此

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

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

中

Answer 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"
        }
    });
}

使用下拉值绑定Kendo Grid数据

2 个答案: