Filter Grid using dropdowns (multiple)

Question

I am trying to filter a grid using multiple drop down menus. What I want to accomplish is somewhat similar to this demo (http://demos.kendoui.com/web/grid/toolbar-template.html) except that:

1. I need to use multiple drop down menus -- not just one.
2. I need the user to be able to first select drop down items, then click a "Search" button which will filter the grid based on what they have selected.

I have searched both stackoverflow and the Kendo UI forums and have found questions similar to mine but nothing which could help me.

Please see below for my jankety code. In this example I am using the columns "First Name" and "Last Name." There is probably some novice error that I am making, and much appreciated if anyone could point it out.

<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() is in an outside script and successfully populates the grid when the page is loaded. The drop down feature also works. However, then I click "Search" nothing at all happens.

Does anyone have any idea what the problem could be?

Answer 1

Why not use filter-menu-customization to add dropdownlists for multiple columns?

See running demo here.