filterMenuInit and Filter(s) function

[Jamie]

I have a grid that requires being pre-filtered. I use the following code successfully to do that:

 

filter: {
            filters: [{ field: "ProductName", operator: "contains", value: "Chai" }]}

 

This pre-filters the grid and when I access the filter menu I can see all the filter options but they are not in alphabetical order. I then use the filterMenuInit function to sort selected columns in ascending order.

 

filterMenuInit: function(e) {
              if (e.field === "UnitPrice" || e.field === "UnitsInStock" || e.field === "ProductName") {
                var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");
                filterMultiCheck.container.empty();
                filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
                filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
                filterMultiCheck.createCheckBoxes();
              }
            }

This does work but only shows the filter values that are contained with the pre-filtered data columns, the rest of the filter values are gone (the pre-filter seems to apply to the filter values as well)

 

If you check the following Dojo example, you'll see that the filter applies successfully, ProductName = Chai, but if you then click on the filter button, you'll see that you can only filter for values contained within the Chai record and nothing else.

 

http://dojo.telerik.com/edowIMax

 

Any help is greatly appreciated, I'm sure it's most likely a placing issue but I've tried multiple ways to do this now including columnInitMenu all to no avail!

[Jamie]

Anyone got anything that could help with this? Really struggling for a fix!

[Alex Hajigeorgieva]

Hi, Jamie,

Thank you very much for the provided Dojo.

To get all of the options of the FilterMultiCheck widget available after using an initial filter, you should clear the filter from its checkSource before setting the data with the filter() method:

filterMenuInit: function(e) {
     if (e.field === "UnitPrice" || e.field === "UnitsInStock" || e.field === "ProductName") {
       var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");
       filterMultiCheck.container.empty();
       filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
       filterMultiCheck.checkSource.filter([]);
       filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
       filterMultiCheck.createCheckBoxes();
     }
   },

In addition to that, so that the grid appears filtered when it is first loaded, you should change the initial filter declaration and the filter icon will be highlighted:

filter: { filters:[{value:"Chai",operator:"eq",field:"ProductName"}], logic:"or" },

Here is the updated Dojo for your reference:

http://dojo.telerik.com/edowIMax/2

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Jamie]

Thank you Alex, I'm extremely annoyed that it was such a simple fix! Another issue I've run into is the pre-filtered value not being checked within the filter menu.

So if you check either of the previous Dojo's, it's filtered to show only the product equal to "Chai" but if you select the dropdown filter and it says 1 item is selected but "Chai" is unchecked.

How do you ensure that pre-filtered values are checked within the filter dropdown?

[Alex Hajigeorgieva]

Hi, Jamie,

Thank you for pointing that the check was not checked.

It's another simple fix - we just need to call the FilterMultiCheck widget refresh() method after we have recreated its checkboxes so it updates the checked state:

http://dojo.telerik.com/edowIMax/3

filterMenuInit: function(e) {
  if (e.field === "UnitPrice" || e.field === "UnitsInStock" || e.field === "ProductName") {
    var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");
    filterMultiCheck.container.empty();
    filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
    filterMultiCheck.checkSource.filter([]);
    filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
    filterMultiCheck.createCheckBoxes();
    filterMultiCheck.refresh();
  }
},

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Jamie]

Thanks Alex, that did the job perfectly. One final issue I've ran into is the pre-filter using the "contains" operator. If you check the Dojo example and change the operator to Contains, you'll notice the checkbox in the filter dropdown no longer works.

 

I need to use the contains operator for my pre-filter, is there a way to still get the checkboxes to work?

 

Thanks again.

[Alex Hajigeorgieva]

Hi, Jamie,

The Kendo UI Grid FilterMultiCheck operator is equals by default. When items are selected, it builds an expression internally that binds to the filter menu. Currently, to change it to "contains" is not an easy task and it means overriding the filter logic.  Here are the options ordered by complexity:

- Change the filterable setting from true - to row and menu.

http://dojo.telerik.com/edowIMax/7

- Add a search in the MultiFilterCheck and keep the Select All checkbox effectively proving a contains option (custom implementation)

https://dojo.telerik.com/@bubblemaster/adEHOPaD

- Override the FilterMultiCheck operator to be "contains":

https://dojo.telerik.com/@bubblemaster/oBawaQAQ

Finally, if you like we can open a Feature Request on your behalf so that the filter operator can be overridden more easily. Let me know if you would like to do that.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[ericvdk]

Hi,

I have a very similar situation in which I need the filter to use operator:"contains". I solved the issue of Jamie with the selected items not being checked but there is another issue: once you change the "eq" operator into "contains" the filter icon in the column heading is not set into k-state-active any more (you can test it over at http://dojo.telerik.com/edowIMax/8), so users don't see that a filter is active in this column. I have tried to explicitly set the k-state-active in the dataBound event. During stepping the code in the debugger I can see the active state on the filter icon, but once the databound code is finished, the active state seems to be removed by the framework.

How to ensure that the filter icon active state is set when the operator is not "eq"?

Best Regards,

Eric

[Alex Hajigeorgieva]

Hi, Eric,

The Kendo UI FilterMultiCheck icon applies the correct state in the third example when the widget is initialized. The initial state however, is not applied. I believe it is easiest as you mentioned, to just add that class initially and let the grid with the custom filter handler manage the rest of the state changes.A timeout is needed to accomplish this initial load:

grid.one("dataBound", function(e){
  setTimeout(function(){
      grid.thead.find("[data-field='FirstName']").find(".k-grid-filter").addClass("k-state-active");
  });
});

Here is the updated example with contains:

https://dojo.telerik.com/UzAGUfIx/2

Have a look and let me know if this helps. I would suggest to open a feature request on your behalf, it seems that this functionality may be sought after. Let me know if you would like that.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[ericvdk]

Hi,

Thanks for this solution. We did it slightly different, using the k-active-filter class, which is not removed after databound:

BZ.Filter = function (e) {
    if (e.field === "MyFieldNameHere") {
        if (e.filter) {
            for (var i = 0; i < e.filter.filters.length; i++) {
                e.filter.filters[i].operator = "contains";
            }
            this.thead.find("th[data-field='MyFieldNameHere'] .k-grid-filter").addClass("k-active-filter");
        }
        else {
            // Clear filter active state
            this.thead.find("th[data-field='MyFieldNameHere'] .k-grid-filter").removeClass("k-active-filter");
        }
    }

}

Best Regards,

Eric

[Alex Hajigeorgieva]

Hi, Eric,

Thank you for sharing your solution with the Kendo UI community.

Let me know in case further questions arise.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik