This is a migrated thread and some comments may be shown as answers.

Filter Multi-Checkbox Customization

5 Answers 655 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott Michetti
Top achievements
Rank 1
Scott Michetti asked on 03 Oct 2019, 07:02 PM

  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

5 Answers, 1 is accepted

Sort by
0
Scott Michetti
Top achievements
Rank 1
answered on 03 Oct 2019, 10:11 PM

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

 

Thanks,

Scott

0
Svet
Telerik team
answered on 07 Oct 2019, 02:42 PM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott Michetti
Top achievements
Rank 1
answered on 09 Oct 2019, 02:33 PM
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
0
Accepted
Svet
Telerik team
answered on 11 Oct 2019, 07:00 AM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Scott Michetti
Top achievements
Rank 1
answered on 22 Oct 2019, 02:30 PM

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

 

Thanks,

Scott

Tags
Grid
Asked by
Scott Michetti
Top achievements
Rank 1
Answers by
Scott Michetti
Top achievements
Rank 1
Svet
Telerik team
Share this question
or