Kendo UI網格自定義過濾器默認功能在框外

我想設置kendo過濾器，就像我們在線銷售網站上的過濾器一樣。 Image for reference Kendo UI網格自定義過濾器默認功能在框外

在這裏，程序將與團體和學校相關聯，並將有一個開始和結束日期。我正在使用自定義代碼設置過濾器，我們可以以某種方式更新kendo網格過濾器菜單以獲取此類過濾佈局？此處沒有過濾器區域中的信息在網格（學校，日期和組）中可見。

在此先感謝

來源

2017-01-02 Vinkesh Kumar

@sean CH感謝您的幫助，我不想用「filterMenuInit」事件，顯示過濾器菜單，它應該是電網外有它的用戶更可見（UX）。此外，用於過濾的字段將不會在網格中顯示爲列等。 –

有沒有內置的方式來讓murtiple過濾你可以做什麼它使複選框和火的讀取和刷新相應的網格 –

用於過濾的字段不會在網格中顯示爲列。爲此，您可以隱藏預期的顏色 –

請在下面找到概念驗證。

這只是一個概念，它可以實現你在做什麼，肯定有更多的研究需要完成，更好的方式來處理複選框檢查和取消選中的目的是提供一個概念如何實現它

您將需要了解更多有關過濾的情況，以防複選框被選中和其他可能性，並確保您可以在telerik文檔或計算器中找到幫助。

這裏是JSBIN http://jsbin.com/bakediseci/edit?html,js,output

FOR隱藏列過濾看到這FILTER HIDDEN COLUMN

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 

</head> 
<span> Group1 <input type="checkbox" id="group1"/><br/> 
<span> Group2 <input type="checkbox" id="group2"/> 

<br/> 
<br/> 

Date: <input id="date" /> 
<br/> 
<br/> 
<br/> 
<br/> 

<div id="grid"></div> 
</html>

的JavaScript：

var data = [ 
    { name: "Paul", birthDate: new Date("1948/12/08"),Group:"Group1" }, 
    { name: "Janet", birthDate: new Date("1952/02/19"),Group:"Group1" }, 
    { name: "Nancy", birthDate: new Date("1963/08/30"),Group:"Group2" }, 
    { name: "Steven", birthDate: new Date("1937/09/19"),Group:"Group2" } 
]; 

$(document).ready(function() {  
    var grid = $("#grid").kendoGrid({ 
    dataSource: data, 
    columns: [  
     {field: "birthDate", format: "{0:d}" }, 
     {field:"name"}, 
     {field:"Group"} 
    ] 
    }).data("kendoGrid"); 


    $(document).ready(function() { 
    //set initial state. 
    $('#group1').val($(this).is(':checked')); 
    $('#group2').val($(this).is(':checked')); 

    $('#group1').change(function() { 
     if($(this).is(":checked")) {   
      $("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group1"});   
     }else { 
     grid.dataSource.filter({}); 
     }  

    }); 

    $('#group2').change(function() { 
     if($(this).is(":checked")) {   
      $("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group2"});   
     }else { 
     grid.dataSource.filter({}); 
     }  

    }); 
}); 

    $("#date").kendoDatePicker({ 
    change: function() { 
     var value = this.value(); 
     if (value) { 
     grid.dataSource.filter({ 
      field: "birthDate", 
      operator: "eq", 
      value: value 
     }); 
     } else { 
     grid.dataSource.filter({}); 
     } 
    } 
    });  
});

輸出

研究和樂於助人的鏈接，你將需要在路上

有一定的研究和源使用，您將需要經過他們再次使它堅實。

http://www.telerik.com/forums/how-to-implement-a-custom-filter#2296030
下抄送維基行貨帶需要歸因
http://www.telerik.com/forums/adding-filters-to-grid-s-source

用戶貢獻。

來源

2017-01-03 06:01:32

感謝您的幫助和時間好友，這肯定會工作，雖然我遵循其他方式來獲得所需的功能（由於死線和其他的東西，我必須在我正在開發的應用程序中完成）。目前將過濾條件作爲數據傳遞給操作並在服務器端而不是客戶端過濾記錄。我也會在本週末晚些時候嘗試你的方法。 –

@歡迎光臨。請保持張貼與您的結果。我真的很喜歡你的基於用戶體驗的想法，通過過濾網格 –

Kendo UI網格自定義過濾器默認功能在框外

回答

相關問題