0

我正在尝试使用多个下拉菜单过滤网格。我想要完成的有点类似于这个演示（http ://demos.kendoui.c​​om/web/grid/toolbar-template.html ），除了：

  1. 我需要使用多个下拉菜单——不仅仅是一个。
  2. 我需要用户能够首先选择下拉项目，然后单击“搜索”按钮，该按钮将根据他们选择的内容过滤网格。

我搜索了 stackoverflow 和 Kendo UI 论坛，发现了与我类似的问题，但没有什么可以帮助我。

请参阅下面的我的 jankety 代码。在此示例中，我使用“名字”和“姓氏”列。我可能正在犯一些新手错误，如果有人能指出，我将不胜感激。 

<script type="text/javascript" src="~/Scripts/Shared/NameData.js"></script>
<script>

/************ CODE FOR THE GRID ************/

    $(document).ready(function () {
        var grid = $("#grid").kendoGrid({
            dataSource: {
                data: getNameData(),
                pageSize: 20,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true
            },
            height: 550,
            sortable: true,
            navigatable: true,
            pageable: {
                refresh: true,
                pageSizes: true
            },
            columns: [
                { field: “FIRST_NAME”, title: "First Name", width: 100 },
                { field: “LAST_NAME”, title: "Last Name" },
            ],
            toolbar: kendo.template($("#template").html()),
        })

/************ FIRST_NAME Dropdown ************/

            var dropdownFIRST_NAME = $("#grid").find("#FIRST_NAME").kendoDropDownList({
                dataTextField: “FIRST_NAME”,
                dataValueField: “FIRST_NAME”,
                autoBind: false,
                optionLabel: "All",
                dataSource: getNameData(),
            });

/************ LAST_NAME Dropdown ************/

            var dropdownLAST_NAME = $("#grid").find("#LAST_NAME").kendoDropDownList({
                dataTextField: “LAST_NAME”,
                dataValueField: “LAST_NAME”,
                autoBind: false,
                optionLabel: "All",
                dataSource: getNameData(),
            });

/************ CODE FOR THE SEARCH BUTTON ************/

            $('#Search').click(function () {
                var filter = new Array();

                var valueFIRST_NAME =     $("#dropdownFIRST_NAME").data("kendoDropDownList").value();
                var valueLAST_NAME = $("#dropdownLAST_NAME").data("kendoDropDownList").value();

                if ($valueFIRST_NAME) {
                    $filter.push({ field: “FIRST_NAME”, operator: "eq", value: $valueFIRST_NAME });
                }

                if ($valueLAST_NAME) {
                    $filter.push({ field: “LAST_NAME”, operator: "eq", value: $valueLAST_NAME });
                }

                var grid = $("#Grid").data("kendoGrid");
                grid.dataSource.filter({
                    logic: "and",
                    filters: $filter
                });
            });
        });
</script>

getNameData() 位于外部脚本中，并在加载页面时成功填充网格。下拉功能也有效。但是，然后我单击“搜索”，什么也没有发生。

有谁知道问题可能是什么？

4

1 回答 1

1

为什么不使用filter-menu-customization为多个列添加下拉列表？ 在此处输入图像描述 在此处输入图像描述

在此处查看运行演示。

于 2013-11-16T10:28:29.627 回答