drop-down-menu - ドロップダウンを使用してグリッドをフィルター処理する (複数)

Question

複数のドロップダウン メニューを使用してグリッドをフィルタリングしようとしています。私が達成したいことは、このデモ ( http://demos.kendoui.c​​om /web/grid/toolbar-template.html ) と多少似ていますが、次の点が異なります。

1. 1 つだけでなく、複数のドロップダウン メニューを使用する必要があります。
2. ユーザーが最初にドロップダウン項目を選択できるようにする必要があります。次に、選択した内容に基づいてグリッドをフィルター処理する「検索」ボタンをクリックします。

stackoverflow と Kendo UI フォーラムの両方を検索しましたが、私のような質問が見つかりましたが、役に立ちませんでした。

私のjanketyコードについては、以下を参照してください。この例では、「First Name」と「Last Name」の列を使用しています。おそらく私が犯している初心者のエラーがいくつかあります。誰かがそれを指摘できれば非常にありがたいです。

<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() は外部スクリプト内にあり、ページが読み込まれるとグリッドに正常に入力されます。ドロップダウン機能も有効です。ただし、[検索] をクリックしても何も起こりません。

何が問題なのか誰にもわかりませんか？