无法以编程方式检查 Kendo Grid 的多选复选框过滤器答案

【问题标题】：Unable to check the multi-select checkbox filter of the Kendo Grid Programmatically无法以编程方式检查 Kendo Grid 的多选复选框过滤器
【发布时间】：2019-03-29 02:59:34
【问题描述】：

我正在尝试以编程方式检查 Kendo 网格的多选复选框的复选框，虽然这是设置输入标签属性值的简单功能，但它似乎对我不起作用。

我已经尝试了以下

1.<input type='checkbox' checked='checked'/>
2. <input type='checkbox' checked='true'/>
3. <input type='checkbox' checked/>
4. $(".k-multicheck-wrap >div >input").attr("checked", "checked");
5. $(".k-multicheck-wrap >div >input").attr("checked", "true");

这些选项似乎都不适用于网格列的过滤器控件。但是，如果我在此控件之外创建一个复选框，它确实可以工作

Here is the code I am trying to work on

请帮我解决这个问题。提前谢谢！

【问题讨论】：

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

【解决方案1】：

它的工作原理是这样的，因为随着时间的推移，当您尝试检查这些复选框时 - 它们还不存在。它们是在用户单击过滤器图标后创建的。

因此，在创建过滤器后会触发 filterMenuInit 事件。你可以在那里做你的逻辑。

注意：如果用户点击过滤器图标，该事件将始终被触发。它只会被调用一次——在初始化之后。它将为用户打开过滤器选项的每一列调用。

这里有一个demo的使用方法。

$(document).ready(function(){
       $("#grid").kendoGrid({
        columns: [ {
            field: "country",
            filterable: {
                multi:true,
                itemTemplate: function(e) {
                   
                      return "<div><input type='checkbox' data-text='#= data.country #' /><span>#= data.country|| data.all #</span></div>"
                    
                }
            }
        }],
        filterable: true,
        filterMenuInit: function(e){
          if(e.field == "country")
        {
            //$(".k-multicheck-wrap >div >input").prop("checked", true)
            $(".k-multicheck-wrap >div >input[type=checkbox][data-text='BG']").prop("checked", true)
        }
        },
      
        dataSource: [ { country: "BG" }, { country: "USA" } ]
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>

 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
    
    <div id="grid"></div>

【讨论】：