Question

我试图以编程方式检查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");

这些选项似乎都不在grid列的过滤器控件中起作用。但是，如果我在此控件之外创建复选框，则它确实可以工作

Here is the code I am trying to work on

请帮助我解决此问题。预先谢谢你！

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

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

1 个答案: