Question

我想设置kendo过滤器，就像在线销售网站上的过滤器一样。 Image for reference

此处的课程将与小组和学校相关联，并具有开始和结束日期。我正在使用自定义代码设置过滤器，我们可以以某种方式更新kendo网格过滤器菜单以获得这种类型的过滤布局吗？此处，过滤区域中的所有信息都不会显示在网格中（学校，日期和组）。

提前致谢

Answer 1

请在下面找到概念验证。

这只是一个可以实现你所做的事情的概念，肯定有更多的研究需要做，更好的方法来处理复选框检查和取消检查的目的是提供一个如何实现它的概念

如果选中复选框和其他可能性，您需要了解有关过滤的更多信息，并确保您可以在telerik文档或stackoverflow中找到有关过滤的帮助。

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

隐藏栏过滤器查看此 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

根据cc-wiki许可的用户贡献，需要归属。

Kendo UI网格自定义过滤器，具有默认功能

1 个答案: