Clear button click callback on kendo Angular grid filter menu template

[Saikiran]

I have implemented kendoGridFilterMenuTemplate on Kendo Angular Grid.

<kendo-grid-column
   field="orderStage"
   title="Order Stage"
   width="110px">
                  <ng-template
                    kendoGridFilterMenuTemplate
                    let-filter="filter"
                    let-column="column"
                    let-filterService="filterService"
                  >
                    <kendo-multiselect
                      [data]="orderStageData"
                      [(ngModel)]="orderStagesSelected"
                      (valueChange)="multiSelectChange($event,filterService,'orderStage')"
                    >
                    </kendo-multiselect>
                  </ng-template>
                </kendo-grid-column>

 

I need to do some operation on click of clear button in my filter. please have a look at the image attached.

 

 

[Dimiter Topalov]

Hello Saikiran,

Each time the Filter Menu "Clear" button is pressed, the Grid filterChange event is fired. You can perform the required custom logic in the handler. You can further introduce some custom logic for checking whether the Clear button menu for the specific field is pressed (for example by comparing the previously existing filter descriptors with the incoming ones), and perform the necessary custom logic only when necessary.

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Saikiran]

Listening on filter change event on grid level when any of filter menu clear button click makes filters empty.

{filters: Array(0), logic: "and"}

My previous filters were like below:

{
"logic":"and",
"filters":[
{
"field":"AccountID",
"operator":"eq",
"value":126283
},
{
"filters":[
{
"field":"orderStage",
"operator":"eq",
"value":"Draft"
}
],
"logic":"or"
}
]
}

 

Here am clearing filter menu column on order stage column, It is very difficult to search for filters of this column from above code to remove them and apply filters.

Please help.

 

 

[Saikiran]

To make it simple, when I click clear button filter: CompositeFilterDescriptor this gives me {filters: Array(0), logic: "and"} from which I cannot find/get the column/field on which the click happened.

[Dimiter Topalov]

Hello Saikiran,

Indeed, I understand that the outlined approach is not ideal and easily applicable to all use cases, but filterChange (respectively - dataStateChange) is the only event fired when the Filter Menu "Clear" button is clicked. In theory, you can compare the previous CompositeFitlerDescriptor with the new (empty) one, and if there is a filter for some field that is present in the previous descriptors, but missing in the new ones - then this is the column the Clear filter button was pressed in.

When the Grid "filter" option is bound to the class field that represents the current filters configuration, and this stored object is updated accordingly, all current filter state is persisted between events coming from different columns Clear buttons, i.e. if there is a filter applied for column/field A, and the column B Clear filter button is pressed, the incoming filter descriptor will contain the filter for column A:

https://stackblitz.com/edit/angular-mdaoci-aluojd?file=app/app.component.ts

In the updated example above, there is an initial filter by ProductName. When we add a second filter, let's say by UnitPrice, both filters are applied. When we clear the UnitPrice filter, the "ProductName" filter still remains.

Typically, you should need modifying the filters manually, but just use the ones, coming in the filterChange/dataStateChange to process the data accordingly. The filter(s) for the respective field will be set internally (either automatically, or manually if you are using the template like in the initially provided snippet).

Can you please describe the scenario and the use case for performing some other operation (different from clearing the filter(s) for the respective field), in further details, as well as the desired functionality that you are after, so I can try providing a more suitable suggestion if one is available?

I any case, please submit a feature request to our Feedback portal for any desired and currently missing features and enhancements that you would like to see in future versions of our packages (for example a dedicated clearFilter event, or adding other specific information to the filterChange event data):

https://feedback.telerik.com/kendo-angular-ui

Again - briefly describe the desired feature/functionality, and the use case behind it, so we can track the item, and estimate the customer demand and the business value of the suggested feature. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Mohit]

Hello Dimiter,

This is really helpful. I was stuck at the same problem and the code sample which you shared helped to solve the filtering issues with multiple columns.

One pending issue is, filtering in Kendo Multi Select is not working somehow. So, what I am looking for is as soon as I start typing in the textbox, it should highlight that value, which is the default behavior of multi select. I saw the code sample and in that also it is not working, looks like. One difference is when I type and enter in your code sample atleast it is picking up that value but in my case that is also not happening.

I tried to add [filterable]="true" in Multi Select and that is also not resolving. Is there any other config required?

Thanks,

Mohit Raja

[Yanmario]

Hi Mohit,

As the forum thread is old, could you submit a private support ticket with any additional details and desired end result which will help us better understand the context of the issue and recommend a solution or workaround if available. Furthermore, a runnable example would also be helpful when creating the ticket, which will help us view the behavior.

Regards,
Yanmario
Progress Telerik