Question

我正在尝试为Kendo网格列创建一个多复选框过滤器。对于此功能，我在列的可过滤条件上使用“ multi：true”属性。我还想使用“ ui”回调函数，当我设置了“ multi：true”属性时，该回调函数似乎不起作用。如果删除此属性，则会调用“ ui：function（e）{}”。

是否可以同时使用这两种方法？

Here is a link to the demo I am trying

提前谢谢！

Answer 1

设置网格数据源的filter属性可以解决问题。

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

    <script>
      var onlyOnce = false;
      $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
              transport: {
                read: {
                  url: crudServiceBaseUrl + "/Products",
                  dataType: "jsonp"
                }              
              },
              filter: {
                                logic: "or",
                                filters: [
                                { field: "ProductName", operator: "eq", value: "Chai" },
                                { field: "ProductName", operator: "eq", value: "Chang" }
                                ]
                            }
            });

        $("#grid").kendoGrid({
          dataSource: dataSource,
          columns: [
              { field: "ProductName", title: "Product Name", filterable:{
                multi:true
              } 
            }
           ],
          filterable: true                    
        });
      });  
    </script>

Answer 2

columns.filterable.ui用于制作自定义过滤器菜单，因此，如果您选择使用该菜单来创建过滤器UI以及所需的任何过滤器初始化。如果您只想初始化过滤器，请使用filtermenuopen event。

<div id="grid"></div>
    <script>
      $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
              transport: {
                read: {
                  url: crudServiceBaseUrl + "/Products",
                  dataType: "jsonp"
                }              
              }             
            });

        $("#grid").kendoGrid({
          dataSource: dataSource,

          columns: [
                        { field: "ProductName", title: "Product Name", filterable:{
                 multi:true
                } 
            }
           ],
          filterable: true,
          filterMenuOpen: function(e) {
                        if (e.field == "ProductName") {
                        e.container.find("input[type=checkbox]").prop('checked', true);
                        }
                }
        });
      });  
    </script>

指定属性“ multi：true”时，Kendo Grid的列可过滤属性“ ui”不起作用

2 个答案: