Фильтруемое свойство столбца Kendo Grid "ui" не работает, если указано свойство "multi: true"

Question

Я пытаюсь создать фильтр с несколькими флажками для столбца сетки Kendo.Для этой функции я использую свойство «multi: true» в фильтруемой колонке.Я также хочу использовать функцию обратного вызова «ui», которая не работает, когда у меня установлено свойство «multi: true».Если я удаляю это свойство, вызывается «ui: function (e) {}».

Есть ли способ использовать оба этих параметра вместе?

Вот ссылкана демо я пробую

Заранее спасибо!

Answer 1

Установка свойства фильтра источника данных сетки делает свое дело.

     <div id="grid"></div>

    <script>
      var onlyOnce = false;
      $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
              transport: {
                read: {
                  url: crudServiceBaseUrl + "/Products",
                  dataType: "jsonp"
                }              
              },
              filter: {
                                logic: "or",
                                filters: [
                                { field: "ProductName", operator: "eq", value: "Chai" },
                                { field: "ProductName", operator: "eq", value: "Chang" }
                                ]
                            }
            });

        $("#grid").kendoGrid({
          dataSource: dataSource,
          columns: [
              { field: "ProductName", title: "Product Name", filterable:{
                multi:true
              } 
            }
           ],
          filterable: true                    
        });
      });  
    </script>  

Answer 2

columns.filterable.ui используется для создания пользовательского меню фильтра, поэтому, если вы решите использовать его, используйте его для создания пользовательского интерфейса фильтра и любой инициализации фильтра, которую вы хотите. Если вы хотите просто инициализировать фильтр, используйте событие filtermenuopen .

<div id="grid"></div>
    <script>
      $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
              transport: {
                read: {
                  url: crudServiceBaseUrl + "/Products",
                  dataType: "jsonp"
                }              
              }             
            });

        $("#grid").kendoGrid({
          dataSource: dataSource,

          columns: [
                        { field: "ProductName", title: "Product Name", filterable:{
                 multi:true
                } 
            }
           ],
          filterable: true,
          filterMenuOpen: function(e) {
                        if (e.field == "ProductName") {
                        e.container.find("input[type=checkbox]").prop('checked', true);
                        }
                }
        });
      });  
    </script>