This is a migrated thread and some comments may be shown as answers.

Cannot Set RadGRid Filter Dropdown Width

3 Answers 147 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Silviu
Top achievements
Rank 1
Silviu asked on 23 Jun 2017, 09:31 AM

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

Sort by
0
Marin Bratanov
Telerik team
answered on 28 Jun 2017, 09:51 AM

Hello Silviu,

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.

Regards,

Marin Bratanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Silviu
Top achievements
Rank 1
answered on 28 Jun 2017, 10:18 AM

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. 

 

0
Marin Bratanov
Telerik team
answered on 29 Jun 2017, 10:17 AM

Hi,

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.

Regards,

Marin Bratanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Silviu
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Silviu
Top achievements
Rank 1
Share this question
or