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

【问题标题】：Kendo Grid's column filterable property "ui" not working when property "multi:true" specified指定属性“multi:true”时，Kendo Grid 的列可过滤属性“ui”不起作用
【发布时间】：2019-04-01 04:26:07
【问题描述】：

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

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

Here is a link to the demo I am trying

提前谢谢你！

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid kendo-multiselect

【解决方案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>

【讨论】：

嗨玛丽莎，谢谢你的解决方案，还有一个后续问题，如果我在过滤器中指定为“neq”的运算符，这会起作用吗？试图理解这一点，因为我看到“neq”的不同行为。
嗨，玛丽莎，使用您上面的解决方案，我正在尝试将其用于 2 个或更多默认值。要么我看不到任何结果，要么浏览器堆栈达到最大值。如果您能在最后一个Link to what I am trying 上帮助我，那就太好了。谢谢！
@Apeksha 请检查上面更新的代码 sn-p。

【解决方案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>

【讨论】：

嗨，玛丽莎，感谢您的解决方案。这部分适用于我。我在这里看到的问题是，如果我尝试仅选择某些复选框，则数据不会在选中列表中过滤。 Link to my demo.有没有办法可以触发过滤器提交，以便在网格的初始加载中只显示选定的复选框行？谢谢！
@Apex 又添加了一个答案来解决您的问题。