Resize GridColumnMenuCheckboxFilter

[Dan]

Hi there,

I have a Kendo React Grid with a GridColumnMenuCheckboxFilter. Some of the values can get out of hand long, which push the filter dialog width out too far. Is it possible to set a width limit?

[Konstantin Dikov]

Hello Dan,

Although that there is no direct way of setting the width of the filter container in the column menu, you can use the following CSS to set explicit width:

            <style>
                .k-filter-menu-container {
                    width: 300px; 
                }

Following is a simple example with the above override:

• https://stackblitz.com/edit/react-ffjekt-xzbqrt?file=index.html

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Dan]

Thank you very much!

[David]

Hi,

This solution no longer works. I updated your example above with KendoReact v8.5.0 and increased the width of the filter container: https://stackblitz.com/edit/react-ffjekt-rkbdsbtm?file=index.html

The css here produces similar results: https://docs.telerik.com/kendo-ui/knowledge-base/increase-the-width-of-the-filter-menu

Is it still possible to set the width of the GridColumnMenuCheckboxFilter?

Kind regards,

David

[Yanko]

Hello, Dan,

The structure of the column menu has changed and also a new min-width rule was added to the styles coming from the theme. You can use a different selector to achieve the same behaviour as before disabling the min-width rule and applying the desired width:

            .k-column-menu-popup.k-popup, .k-grid-columnmenu-popup.k-popup {
                max-width: none;
                width: 400px; 
            }

I prepared an example demonstrating the above approach:

• https://stackblitz.com/edit/react-ffjekt-d1wgqv7t?file=index.html 

Please let me know if additional inquiries arise.

Regards,
Yanko
Progress Telerik