javascript - Unable to check the multi-select checkbox filter of the Kendo Grid Programmatically

Question

I am trying to programmatically check the checkboxes of the Kendo grid's multi-select checkbox and although this is a simple functionality of setting the attribute value of the input tag, it does not seem to work for me.

I have tried the following

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");

None of these options seem to work inside the grid column's filter control. But if I create a checkbox outside of this control it does work

Here is the code I am trying to work on

Please help me fix this issue. Thank you in advance!

标签： javascriptjquerykendo-uikendo-gridkendo-multiselect

Answer 1

It works like that because in time, when you are trying to check those checkboxes - they don't exist yet. They are created after user click on filter icon.

From that reason, there is filterMenuInit event which is fired after filter is created. You can do your logic in there.

Note: That event will be fired always if user clicks on filter icon. It will be called only once - after initialization. And it will be called for each column where user opens filter options.

Here is a demo how to use it.

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