Filters in Native Grid header

[ComplySci]

Hello,

In current implementation of the our web application - we use Kendo UI for jQuery. We decided to implement new pages inside our application using Kendo UI for VueJs. In current implementation we have a lot of grids with filters (filter icon + filter popup) in the column header (similar to https://demos.telerik.com/kendo-ui/grid/filter-menu-customization). But we can't find any examples of such implementation for native Kendo Vue Grid.

Is it possible? We need to have consistent behavior of grid filters and user experience all over our application for jQuery and VueJs implementation.

Thank you in advance

[Petar]

Hello ComplySci,

Here is a StackBlitz example that demonstrates how we can create a custom filter inside the Kendo UI for Vue Native Grid. In the current project, the filter of the first column is a custom one. It has only to filter options - "Contains" & "Is equal to".

Using the demonstrated approach, you can implement different custom filters, based on the needs of your application.

If you are using a column menu filtering, as in the link from your reply, then you can check this "Customizing the Filter Component" example from our documentation.

I hope the linked examples will help you implement the targeted functionality in the application you are working on.

Regards,
Petar
Progress Telerik

[Mat]

Do you have an updated example you can share? The linked StackBlitz is no longer functional.

Also, the link to the documentation you provide doesn't inlucde any details on customizing the filter component.

[Vessy]

Hi, Mat,

The "Customizing the Filter Component" section linked above was moved to a dedicated ColumnMenu Filtering article and can be find in the following link:

• https://www.telerik.com/kendo-vue-ui/components/grid/filtering/filter-menu/#toc-customizing-the-filter-component

Below you can examine an up-to-date demo showcasing how to apply this customisation in action:

• https://www.telerik.com/kendo-vue-ui/components/grid/filtering/filter-menu/#toc-customizing-the-filter-component 

[Mat]

Hi,

I'm returning to this as I'm still unable to find any examples of what I'm looking for.

I'm trying to use a dropdown list for the filter in the Column Menu, but this isn't covered by any of the links provided.

I've managed to integrate a droipdown into the column menu, but I'm having trouble with the column menu closing when I open the dropdown.