I have a filter dropdown as you can see in the attachment and my filter options are quite wide and they either drop to two lines or add a scrollbar which is not what I want.
I have tried adding FilterControlWidth="300px" to the GridBoundColumn in the definition of the RadGrid but it is being ignored.
What is the correct way of expanding the width of the filter dropdown?
3 Answers, 1 is accepted
The FilterControlWidth applies to the filter in the grid header cell, not to the context menu.
To be honest, width settings for the context menu have not been exposed as settings.
Nevertheless, I am attaching here a sample that uses a CSS override to change the menu elements width. I must note that this may not suit all use cases, and cannot be really dynamic. Such a workaround is not ideal, because it is a hack, since the excel-like menu does not have a provision for changing its size.
Here are the key points:
- The OnPreRenderComplete event is used to add a CSS class to the menu.
- The RenderMode is Lightweight because it allow for more CSS customizations.
- A dozen lines of CSS override the built-in menu settings so that they set the width to a hardcoded value (500px in the sample).
I hope this helps you move onward.
Hi Marin, thanks for the suggestion, I have managed to get the context menu to be wider but the listbox with the selections is still the same, see attached.
Also the Columns context menu seems to get broken when expanding the width, see second attachment.
Can you confirm that:
- you are using the Lightweight RenderMode
- your Telerik.Web.UI version is not old (a rough estimate would be - it is from 2017)
The hack I provided targets the Lightweight mode and it would not work for Classic. You could try following the same approach and inspect the rendered HTML with the browser dev toolbar to see if you can hack the existing rules, but I cannot guarantee it will be possible.
I am attaching two screenshots of the expected behavior from my sample. At this point the last piece of advice I can offer is comparing your code to it to find the differences.