Kendo 网格的列可过滤 属性 "ui" 在指定 属性 "multi:true" 时不起作用

Question

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

有什么方法可以同时使用这两种方法吗？

Here is a link to the demo I am trying

提前致谢！

Answer 1

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>  

Answer 2

设置网格数据源的过滤器属性就可以了。

     <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>