Customise Column Menu to use a dropdown list for filter

[Mat]

I can't find anything in the docs that demonstrates how to customise the filter component of a column menu. I need to replace the filter's input with a dropdown list. I'm trying to replicate functionality that was fairly straight-forward using Kendo UI for jQuery.

 

Any advice is much appreciated.

[Vessy]

Hi, Mat,

You can see a demo that showcases how to customize the Filter component inside the Column menu of the grid in the following article:

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

Regards,
Vessy
Progress Telerik

[Mat]

Thanks, but tThe linked example shows how to add a selectable list of columns into the Column Menu. There is no example of a customized filter component within the menu: for example, a dropdownlist of available options.

[Filip]

Hi, Mat,

It is also possible to render a custom ColumnMenu that uses a DropDownList, I have prepared the following runnable example that showcases a possible approach:

• https://stackblitz.com/edit/oyudxk-abeqffwm?file=src%2Fmain.vue

Please review the implementation above and let me know in case this is not exactly what you are looking for and I will gladly assist in achieving the required functionality.

Regards,
Filip

[Mat]

Thanks. That's more-or-less what I'd managed to come up with.

I was expecting a more standardised approach that would allow replacing the filter's text input with a dropdown, whie retaining the operator slelection. I guess I need to stop making any comparison between Kendo UI for Vue and Kendo UI for jQuery. Things that are very simple in jQuery require far more development in Vue.

[Filip]

Hi, Mat,

I agree that most features in the jQuery suite can generally be implemented more easily compared to the Kendo UI for Vue components. The reason for that is that the JQuery components are more mature. We are actively trying to unify the features across different suites and make the implementations as easy as possible, thank you for your feedback it is quite valuable.

Regards,
Filip