1

I am trying to create a multi checkbox filter for a Kendo grid column. For this feature I am using "multi:true" property on the column's filterable. I also want to use the "ui" callback function which does not seem to work when I have the "multi:true" property set. If I remove this property, the "ui:function(e){}" gets called.

Is there a way I can use both these together?

Here is a link to the demo I am trying

Thank you in advance!

Apeksha
  • 259
  • 1
  • 3
  • 15

2 Answers2

2

Setting the filter property of the grid data source does the trick.

     <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>
Marissa Fernandes
  • 761
  • 4
  • 8
  • Hi Marissa, Thank you for the solution, One more follow up question, would this work if the operator I specify as "neq" in my filter? Trying to understand this as I am seeing a different behavior with "neq". – Apeksha Apr 02 '19 at 06:59
  • Hi Marissa, Using your solution above I am trying to work this for 2 or more defaulted values. Either I see no results or browser stack reaches its maximum. It would be great if you can help me out on this last one [Link to what I am trying](https://dojo.telerik.com/EcUdaFeT/32). Thank you! – Apeksha Apr 02 '19 at 08:00
  • @Apeksha please check the updated code snippet above. – Marissa Fernandes Apr 02 '19 at 13:47
0

The columns.filterable.ui is used for making a custom filter menu so if you choose to use that use it to create the filter UI plus any filter initialization you want. In case you want to just initialize the filter use the filtermenuopen event.

<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>
Marissa Fernandes
  • 761
  • 4
  • 8
  • Hi Marissa, Thank you for your solution. This works partially for me. The issue I am seeing here is, if I try to select only certain checkboxes, the data is not filtered on the checked list. [Link to my demo](https://dojo.telerik.com/EcUdaFeT/10).Is there a way I can fire the filter submit so that I have only the selected checkbox rows shown on the initial load of the grid? Thank you! – Apeksha Apr 01 '19 at 17:30
  • @Apex have added one more answer to address your issue. – Marissa Fernandes Apr 02 '19 at 06:46