Блог

Главная - Вопросы по программированию - Не удается программно проверить фильтр с несколькими флажками для сетки Kendo

Не удается программно проверить фильтр с несколькими флажками для сетки Kendo

#javascript #jquery #kendo-ui #kendo-grid #kendo-multiselect

#javascript #jquery #kendo-ui #kendo-grid #kendo-множественный выбор

Вопрос:

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

Я попробовал следующее

 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. Но если я создам флажок вне этого элемента управления, это сработает

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

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

Ответ №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>