Kendo Grid Filter with multi checkbox questions

[Gregg]

Hello there! First I am new at using this but you guys have great examples on your website to get started which have really helped. I am using the multi-checkbox menu filter list filter that is on this page https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/ and I have 2 questions about it:

 1: I want to remove the clear and remove buttons from here. I have tried to style them in CSS with different options but nothing works. I have tried

.k-filter-menu .k-button-group {display:none !important;}

also

[showOperators]= false

Is there another way to hide or remove them?

2: When you select the category filter and have all the categories, when you check the category (ex: check beverages then click filter it filters beverages), is there a way when I click beverages checkbox that it filters beverages at that point instead of selecting beverages then click filter? Also when you deselect the the check box I want it to act as if you clicked clear filter?

Thanks!

 

[Dimiter Topalov]

Hi Gregg,

The Filter and Clear menu buttons are a built-in part of the Grid Menu filtering functionality, while the Grid Filter Menu template allows customizing the content of the container above this buttons only. However, the buttons can be hidden via CSS when ViewEncapsulation is set to None, or the custom styling hiding the buttons is provided globally:

encapsulation: ViewEncapsulation.None,
    styles: [`
      .k-filter-menu .k-button-group {
        display: none;
      }
    `],

https://angular.io/guide/component-styles#view-encapsulation

The MultiCheck filter component is just an example how the developers can utilize their own custom filtering UI within the Grid Filter Menu template. It is not an officially supported Kendo UI for Angular component, but rather serves the purpose of pointing developers in the right direction when implementing their own reusable custom filtering components. This is why any further adjustments and customizations are in considered developer effort, and fall outside of the scope of our support service.

That being said, we are usually trying to go the extra mile, and provide further insights and suggestions to point the developer in the right direction regarding custom implementation where applicable, and this is why I prepared the following modified example:

https://stackblitz.com/edit/angular-nskjqx-zyg5n4?file=app/app.component.ts

To achieve the desired functionality, the developer can hide the Clear and Filter buttons, and apply filtering manually upon changing the value of the MultiCheck component. A possible approach is to emit a valueChange event containing the latest filter descriptor for the respective column, and modify the current Grid filters in the event handler as necessary. Then the Grid data can be filtered based on the newly updated filter.

It is worth mentioning that the Clear and Filter buttons can be hidden only in menus that contain custom filtering component, so that the built-in functionality for other columns remains intact, e.g.:

.k-filter-menu multicheck-filter + .k-button-group {
        display: none;
      }

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Gregg]

Dimiter,

The encapsulation was not in my code when I put it in my code the formatting of the grid changed when I selected the filter by dropping the grid to the bottom of the page and making it look weird. So for now i will not be removing the clear and filter buttons. As far as the checkbox filtering, your stackblitz example is exactly what I was looking for but this line of code is giving me problems and will not compile the code and is stating that filters is not a property of CompositeFilterDescriptor. Thank you for helping me with this!

f.filters.length ? f.filters[0].field === field : false);

[Dimiter Topalov]

Hi Gregg,

Indeed, this is a strictly TypeScript issue, related to the fact that the "filters" array of the CompositeFilterDescriptor could consist of both FilterDescriptor and CompositeFilterDescriptor objects. The "filters" property actually does not exist on the FilterDescriptor type, thus the observed error:

The most straight-forward approaches to fix this is to either cast the object strictly to CompositeFilterDescriptor (so it will be no longer considered possible for it to be a FilterDescriptor), or to not set the type of the State/Filter object. Another option is to access the inner properties via the ['propertyName'] syntax instead of with dot (.):

https://stackblitz.com/edit/angular-nskjqx-zvxs5l?file=app/app.component.ts

onValueChange(e, field) {
      const filterByFieldIndex = this.filter.filters.findIndex(f => (f as CompositeFilterDescriptor).filters.length ?  (f as CompositeFilterDescriptor).filters[0]['field'] === field : false);

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Gregg]

This worked perfectly. Thank you for all your help