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网格自定义过滤器默认功能在框外

回答

相关问题