Grid Filter Type/Header Context width question

[Steve]

I'm trying to get the RadGrid control to display the FilterType correctly. The attached image shows the current results where the filter dialog width is too small.

I have tried the various FilterType settings and am current set to the "Classic" type. The sample project was created in VS2013 as a standard webforms project and then had the upgrade wizard applied to use the Telerik web controls.

Also looked at the demo projects for excel type filtering, but wasn't sure of the style sheet setting differences. Finally, I tried checking the header context popup for the filter, but I didn't know if a CSS style tag needed to be overridden in the page. The DOM seemed to show the internal iframe within the div having a width size of around 170px.

Here is a sample of the code. Pretty straightforward code. Thanks for any help, Steve H

 <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableAJAX="true">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AllowFilteringByColumn="true" runat="server" FilterType="Classic" EnableHeaderContextMenu="true" 
            EnableHeaderContextFilterMenu="true" AllowPaging="True" PagerStyle-AlwaysVisible="true" DataSourceID="SqlDataSource1" AllowSorting="true" GroupingEnabled="false">
            <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="ProjectModNumber,ProjectModRowId">
                <Columns>
                    <telerik:GridBoundColumn DataField="ProjectModNumber" FilterControlAltText="Filter ProjectModNumber column" HeaderText="Project Mod #" ReadOnly="True" SortExpression="ProjectModNumber" UniqueName="ProjectModNumber">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ProjectModRowId" DataType="System.Int32" Display="False" FilterControlAltText="Filter ProjectModRowId column" HeaderText="ProjectModRowId" ReadOnly="True" SortExpression="ProjectModRowId" UniqueName="ProjectModRowId" Visible="False">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="RoleNameAE" FilterControlAltText="Filter RoleNameAE column" HeaderText="AE Name" ReadOnly="True" SortExpression="RoleNameAE" UniqueName="RoleNameAE">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>  

 

[Kostadin]

Hi Steve,

I tried to replicate the issue by using the provided solution but I was unable to. Could you please verify that you are not using some custom CSS rule which might affect the filter menu width? Generally you can use the following rule to override the filter menu width.

<style>
    .rmSlide {
        width: 195px !important;
    }
</style>

Regards,
Kostadin
Telerik

[Jonathan]

Hi Kostadin,

I have a similar problem with the HeaderContext filter.  I cannot set the width.  Here is what it looks like for me.  Ideally the width would be dynamic so my items don't wrap onto 2-3 lines.

[Attila Antal]

Hi Jonathan

The HeaderContextFilter menu has a default width to keep the menu consistent. Otherwise, Imagine if there wasn't one and the text was 300-500 characters long, it would expand the menu by 1000 px.

That result would not be pleasant either:

 

You can use CSS to increase the width, but you should also consider enabling the CheckBoxlist for columns that only have short item values. It's not a recommendation, but certainly a good UI advice.

 

Here are the CSS overrides that you can use to override the default width. I tested it for both Lightweight and Classic RenderMode.

<style>
    /* Change the width here */
    html body .RadMenu.GridContextMenu {
        width: 600px !important;
    }

    /* The following rules will adjust the child elements */
    html body .GridContextMenu li.rgFilterListMenu, 
    html body .GridContextMenu li.rgFilterMenu {
        max-width: unset;
    }

    html body .GridContextMenu .rmItem .rmContent {
        max-width: unset;
    }

    html body .RadMenu.GridContextMenu > ul,
    html body .RadMenu.GridContextMenu ul.rlbList,
    html body .GridContextMenu .rgFilterListMenu .RadListBox {
        width: 100%;
    }
    html body .GridContextMenu .rmItem .rmContent > *:not(button),
    html body .GridContextMenu .rmItem .rmText > *[id] {
        display: block;
    }
</style>