使用下拉式濾波器網格（多個）

謝謝大家，任何人都可以幫助我。我對JavaScript和Kendo UI頗爲陌生，所以請隨身攜帶。使用下拉式濾波器網格（多個）

我想要做的是使用多個下拉菜單過濾網格。我想要完成的有點類似於這個演示（http://demos.kendoui.com/web/grid/toolbar-template.html），除了：

我需要使用多個下拉菜單 - 不只是一個。
我需要用戶能夠先選擇下拉項目，然後點擊「搜索」按鈕，它將根據他們選擇的篩選網格。

我已經搜索了兩個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（）位於外部腳本中，並在加載頁面時成功填充網格。下拉功能也適用。然而，然後我點擊「搜索」什麼都沒有發生。

有沒有人有任何想法可能是什麼問題？預先感謝您的時間。

來源

2013-06-21 EscapeKey