Filter Multi Checkboxes available in Angular

[Sagar]

hello 

I want to add dropdown filters in Kendo grid column headers, so Instead of typing value, can we select the value from the dropdown in the Grid column header? please suggest a way if anyone knows how to do this.

I got the below jQuery  link that is exactly similar to what I am looking

https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes

[Kaloyan]

Hi Sagar,

I am happy to say that this is fully achievable with Kendo UI for Angular using custom filters in a FilterMenu template. As this is a question that pops up now and then we have documented the following  possible approaches:

• Custom DropDownList Filter Menu Component - Here you will see a simple DropDownList component integrated in the Filter Menu.
• Custom Multi-Checkbox Filter Menu component - In this case instead of single selection in a DropDownList, you have multi-checkbox selection.
  

I believe the second link is more similar to the jQuery sample you have provided, but I would recommend checking both the implementations and deciding which will serve your requirements best.

I hope this helps. Still, if you require further assistance, please do not hesitate to get back to us.

Regards,
Kaloyan
Progress Telerik

[Sagar]

Hi, Kaloyan

thank you for the links and suggestions. my kendo-angular-grid version is 4.6.3 and I am using angular 6.

I have tried a simple dropdown list but it does not load correctly. dropdown values are not visible, I am attaching a

screenshot below look once

also, I want my other column filters to be default filters here due to filterable="menu" other filters are also changed.

if I make [filterable]="true"  my default filters are working correctly but the dropdown is not working.

please tell me I can achieve this in angular 6 with kendo-angular-grid version 4.6.3 ?

 

 

 

 

[Kaloyan]

Hi Sagar, to be honest, I am not sure if this requirement can be achieved with Kendo UI for Angular Grid v4.6.3 as this version is more than 2 years old now. Additionally, Angular 6 is also not supported for quite some time now.

Given that, if we are talking of an active project, I would strongly recommend you to update both the Angular and Kendo versions in it.

[Sagar]

Hi Kaloyan, now my project's angular version is 13 and I have implemented the same dropdown in my latest project but when I select a particular option from the dropdown then my data is not filtered based on the selection.

below is the link to the kendo example that I have implemented in my project.

https://www.telerik.com/kendo-angular-ui/components/grid/examples/filtering/custom-dropdownlist-filter/?theme=default-ocean-blue&themeVersion=5.8.0

question is I want a custom dropdown only for specific one column and the other columns' dropdown remains the default but here if I change  filterable="menu" other columns' filters are changing. please refer attachment to show how filters are changing. and if a solution is available for this please revert me.in simple, my requirement is I want a custom dropdown for one column, and the other columns' filters should remain the default

[Martin Bechev]

Hi Sagar,

I checked the provided demo, but the filters are working correctly.

Regarding the custom filter appearance, it looks like the template is used to customize the filter menu for each column. Thus they are displaying the same custom filter. 

Here is the modified example where the DropDownList custom filter is displayed only for the Category column.

https://stackblitz.com/edit/angular-fmjmfb

I hope this sheds some light on the case.

 

[Sagar]

hi, martin thank you for your help but when we set filterable=menu that time other default filters will get changed. above my comment screenshots are attached. for now, I am using filterable=menu,row so using this I will filter specific columns and it will keep old default filters also but it's showing filters in 2 rows this behavior is okay for now.