下拉網格的自定義過濾器

這裏是我正在使用的HTML頁面，它不能正常工作。問題在哪裏，任何人都可以檢查一次。下拉網格的自定義過濾器

這裏問題過濾後網格的下拉值也在變化或過濾。

can任何人都可以在html頁面中檢查此代碼。

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /> 
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> 
    <link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" /> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script> 
</head> 
<body> 
<div id="example" class="k-content"> 



    <span class="nwcselection">data</span> 
    <input id="ddl"/></div> 
<input type="button" id="btnfilter" value="Filter" onclick="Filter()" /> 
<div id="grid"></div> 
</div> 


<script type="text/javascript"> 
    var data =new kendo.data.DataSource({ 
     type: "odata", 
     transport: { 
      read: 
        "http://demos.kendoui.com/service/Northwind.svc/Products", 
     }, 
    }); 
    function createGrid() 
    { 
     var grid= $("#grid").kendoGrid({ 
      dataSource:data, 
      schema: { 
       model: { 
        fields: { 
         ProductID: { type: "number" }, 
         UnitPrice: { type: "number" }, 
         ProductName: { type: "string" }, 
        } }}, 

      pageable: true, 
      columns: [ 
       { field: "ProductID", title:"Product ID", width:100 }, 
       { field: "ProductName", title:"Product Name" }, 
       { field: "UnitPrice", title:"Unit Price", width: 100 } ] 
     }); 
    } 






    function dd() 
    { 
     $("#ddl").kendoDropDownList({ 
      dataSource: data, 
      optionLabel: "Select category...", 
      dataTextField: "ProductName", 
      dataValueField: "ProductName" 
     }).data("kendoDropDownList"); 
    } 


    function Filter() { 

     $("#btnfilter").click(function() { 
      $filter = new Array(); 
      $ProductName = $("#ddl").data("kendoDropDownList").value(); 

      if($ProductName) 
      { 
       $filter.push({ field: "ProductName", 
        operator: "contains", value: $ProductName }); 
      } 
      var grid = $("#grid").data("kendoGrid"); 

      grid.dataSource.filter({ 
       logic: "and", 
       filters: $filter 
      }); 
     }); 

    } 


    $(document).ready(function() { 

     createGrid(); 
     Filter(); 
     dd(); 
    }); 
</script> 
</body>

來源

2013-09-24 stpdevi

問題是你使用Grid和DropDown相同的DataSource：它們就像是指向同一個對象的指針。過濾一個會過濾另一個，因爲它們實際上是相同的東西。

嘗試創建數據源兩次：

var ds1 =new kendo.data.DataSource({ 
    type: "odata", 
    transport: { 
     read: 
       "http://demos.kendoui.com/service/Northwind.svc/Products" 
    } 
}); 
var ds2 =new kendo.data.DataSource({ 
    type: "odata", 
    transport: { 
     read: 
       "http://demos.kendoui.com/service/Northwind.svc/Products" 
    } 
});

，然後使用它們中的每一個在不同的元件：

var grid = $("#grid").kendoGrid({ 
    dataSource: ds1, 
    schema : { 
     model: { 
      fields: { 
       ProductID : { type: "number" }, 
       UnitPrice : { type: "number" }, 
       ProductName: { type: "string" } 
      } }}, 

    pageable: true, 
    columns : [ 
     { field: "ProductID", title: "Product ID", width: 100 }, 
     { field: "ProductName", title: "Product Name" }, 
     { field: "UnitPrice", title: "Unit Price", width: 100 } 
    ] 
}); 

$("#ddl").kendoDropDownList({ 
    dataSource : ds2, 
    optionLabel : "Select category...", 
    dataTextField : "ProductName", 
    dataValueField: "ProductName" 
}).data("kendoDropDownList");

來源

2013-09-24 10:01:00 OnaBai

感謝溶液 – stpdevi

下拉網格的自定義過濾器

回答

相關問題