Filter Multi-Checkbox Customization

[Scott Michetti]

  Hello,

I am using the Multi-Checkbox Menu Filtering example here https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/#toc-multi-checkbox-menu-filtering in my code. Is there a way to remove the "Clear" and "Filter" buttons and replace them with my own? I would like my custom buttons to have the same functionality as the "Clear" and "Filter" buttons, but I do not know what I would call on the click event.

Secondly, is there a way to have the "Filter" code called when the user clicks away from the popup? This way, the user can either click the "Filter" button or just click away to close the popup and have the filter occur.

 

Thanks,

Scott

[Scott Michetti]

I also realized that I will need to set the width of the popup.

 

Thanks,

Scott

[Svet]

Hi Scott,

Thank you for the provided details.

The referenced article demonstrates an example of how a custom filter menu can be created utilizing the FilterMenuTemplateDirective. That template provides the buttons out of the box. Indeed, there is no built-in option to remove these buttons. Thus, if they have to be customized then some custom CSS can be used in order to overwrite the used default kendo styles. The same approach can be overtaken in order to change the width of the popup. Please check the following example demonstrating the suggestion:

https://stackblitz.com/edit/angular-6c5ugo?file=app/app.component.ts

Another approach of achieving the desired functionality would be to use a header template for the columns. This will allow to add a custom filter icon. When clicking the filter icon a Popup component can be opened. This approach leaves the implementation in the hands of developer allowing to add any custom HTML and/or CSS within the Popup. It allows to set the width of the Popup (through the popupClass input property) and to add any custom button component. It will also allow to filter the Grid upon clicking outside the Popup by handling the (close) event of the Popup.

Let me know what you think about the suggested approaches. Feel free to write back in case there is something unclear or any further guidance would be required for this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Scott Michetti]

Thank you Svetlin for the quick response and the great recommendations. I think my best option would be to use a header template. I tried this, but when I add a span with the column text and the filter icon, the sort icon is misplaced. So I decided to handle the filter and the sort myself. That is fine, but I have 2 issues:

1. When I am not using a header template, I am able to click anywhere in the cell to get the sort to work. When I use a header template with a span, the click event I attach to the span to sort will only happen over the span, which does not cover the whole cell. Is there a way to get the span to fill the entire cell so the user can click anywhere in the cell to sort? Then when the user clicks on the filter icon, it will filter.

2. The kendoGridFilterMenuTemplate has a CLEAR and a FILTER button built in. When clicked, the buttons will fire a filterchange event. Can I fire these events from my custom buttons?

Thanks,
Scott

[Svet]

Hi Scott,

Thank you for the provided additional details.

About the first question, when using a header template the custom filter icon can be placed within an <a class="k-grid-filter"> in order to resemble the default filter icons and not to misplace the sort icon:

        <kendo-grid-column field="ProductName" title="Product Name" width="200" [filterable]="false">
          <ng-template kendoGridHeaderTemplate>
              <span>Product Name</span>
              <a class="k-grid-filter" (click)="click($event)">
                <span class="k-icon k-i-filter"></span>
              </a>
          </ng-template>
        </kendo-grid-column>

Then, when clicking the custom filter icon we can prevent the propagation of the original event so, that sorting is not triggered:

    public click(e){
      e.stopImmediatePropagation();
      console.log("custom filter")
    }

Here is the updated example:

https://stackblitz.com/edit/angular-6c5ugo-femctj?file=app/app.component.ts

Indeed, the demo should be further updated in order to open a Popup when clicking the custom filter button.

About the second point, in general the (filterChange) event is fired whenever the Grid has been filtered through one of its built-in features. If there are custom filter buttons, when handling their generic (click) events the developer has control over the actual filtering and can perform any desired custom functionality manually. For example, if it is required, the handler function of the (filterChange) event can be called and any custom data can be passed to it.

I hope this provides some more details on this case. Please let me know in case there is something unclear or any further assistance is required for this case.  

Regards,
Svetlin
Progress Telerik

[Scott Michetti]

That's a great idea Svetlin. That is what I needed.

 

Thanks,

Scott