Cannot Set RadGRid Filter Dropdown Width

4 posts, 0 answers
  1. Silviu
    Silviu avatar
    63 posts
    Member since:
    Feb 2015

    Posted 23 Jun 2017 Link to this post

    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?

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5813 posts

    Posted 28 Jun 2017 Link to this post

    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.
  3. Silviu
    Silviu avatar
    63 posts
    Member since:
    Feb 2015

    Posted 28 Jun 2017 in reply to Marin Bratanov Link to this post

    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. 

     

  4. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5813 posts

    Posted 29 Jun 2017 Link to this post

    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.
Back to Top