Блог

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

Есть ли способ, которым я могу использовать оба этих параметра вместе?

Вот ссылка на демонстрационную версию, которую я пытаюсь

Заранее благодарю вас!

Установка свойства filter источника данных grid делает свое дело.

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

Столбцы.поддается фильтрации.пользовательский интерфейс используется для создания пользовательского меню фильтра, поэтому, если вы решите использовать это, используйте его для создания пользовательского интерфейса фильтра плюс любой инициализации фильтра, которую вы хотите. В случае, если вы хотите просто инициализировать фильтр, используйте событие filtermenuopen 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>