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

Question

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

有没有办法可以同时使用这两种方法？

这是我正在尝试的演示的链接

先感谢您！

Answer 1

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

     <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 事件。

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