Невозможно установить фильтр флажка множественного выбора в Kendo Grid Программно

Question

Я пытаюсь программно установить флажки флажка multi-select сетки 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");

Кажется, что ни один из этих параметров не работает внутри элемента управления фильтра столбца сетки.Но если я создаю флажок вне этого элемента управления, он работает

Вот код, над которым я пытаюсь работать

Пожалуйста, помогите мне решить эту проблему.Заранее спасибо!

Answer 1

Это работает так, потому что со временем, когда вы пытаетесь установить эти флажки - они еще не существуют.Они создаются после нажатия пользователем значка фильтра.

По этой причине происходит событие filterMenuInit , которое запускается после создания фильтра.Вы можете сделать свою логику там.

Примечание. Это событие будет вызываться всегда, если пользователь нажимает на значок фильтра.Он будет вызван только один раз - после инициализации.И он будет вызываться для каждого столбца, в котором пользователь открывает параметры фильтра.

Вот пример , как его использовать.

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