使用下拉列表过滤网格（多个）答案

【问题标题】：Filter Grid using dropdowns (multiple)使用下拉列表过滤网格（多个）
【发布时间】：2013-06-21 08:49:34
【问题描述】：

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

我需要使用多个下拉菜单，而不仅仅是一个。
我需要用户能够首先选择下拉项目，然后单击“搜索”按钮，该按钮将根据他们选择了什么。

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

有人知道问题出在哪里吗？

【问题讨论】：

标签： drop-down-menu filter grid kendo-ui

【解决方案1】：

为什么不使用filter-menu-customization 为多个列添加下拉列表？

查看运行演示here。

【讨论】：