Filtering Overlap

[digitall]

I have the following grid setup:

<telerik:RadGrid runat="server" ID="grMembers" OnNeedDataSource="grMembers_NeedDataSource" AutoGenerateColumns="false" ShowFooter="false" OnItemDataBound="grMembers_ItemDataBound" OnItemCommand="grMembers_ItemCommand" OnDataBound="grMembers_DataBound">

    <MasterTableView DataKeyNames="Id" CommandItemDisplay="Top" CommandItemStyle-Height="30px" ItemStyle-VerticalAlign="Top" AlternatingItemStyle-VerticalAlign="Top" HierarchyDefaultExpanded="false" HierarchyLoadMode="Client" AllowFilteringByColumn="true">

        <CommandItemTemplate>

            <asp:Button runat="server" ID="cmAddItem" CssClass="rgAdd" style="margin-left: 10px;" /><asp:HyperLink runat="server" ID="lkAddItem" Text="Add Member" NavigateUrl="javascript:;" />

        </CommandItemTemplate>

        <Columns>

            <telerik:GridTemplateColumn ItemStyle-Width="20px" ItemStyle-Wrap="false" AllowFiltering="false">

                <ItemTemplate>

                    <asp:Button runat="server" ID="cmEdit" Text="Edit" CssClass="rgEdit" CommandName="Edit" />

                </ItemTemplate>

            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Detail" DataField="Detail" ItemStyle-Width="150px" FilterControlWidth="100px">

                <ItemTemplate>

                    <%-- Layout --%>


                </ItemTemplate>

            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Contact" DataField="Contact" ItemStyle-Width="150px">

                <ItemTemplate>

                    <%-- Layout --%>


                </ItemTemplate>

            </telerik:GridTemplateColumn>

            <telerik:GridDateTimeColumn HeaderText="Join Date" DataField="SignupDate" ItemStyle-Width="125px" />

            <telerik:GridTemplateColumn HeaderText="Paid" DataField="Paid" ItemStyle-Width="50px">

                <ItemTemplate>

                    <asp:Image runat="server" ImageUrl='<%#(Convert.ToBoolean(Eval("Paid").ToString())) ? "~/_assets/images/accept.png" : "~/_assets/images/cancel.png" %>' />

                </ItemTemplate>

            </telerik:GridTemplateColumn>

            <telerik:GridBoundColumn HeaderText="Seller #" DataField="SellerNumber" ItemStyle-Width="100px" />

            <telerik:GridButtonColumn ButtonType="ImageButton" HeaderStyle-Width="20px" ItemStyle-Width="20px" CommandName="Delete" ConfirmDialogType="RadWindow" ConfirmText="Are you sure you wish to remove this item?" />

        </Columns>

    </MasterTableView>

</telerik:RadGrid>

Everything on the grid works great (including filtering), however in FF3 the filtering icons look like the attached image and in IE it's even worse. Any ideas? I tried using FilterControlWidth but it doesn't seem to make any difference at all. I also made the column widths larger and smaller and it still does the exact same thing, no matter the width of the column.

[Dimo]

Hello digitall,

Column widths should be set with HeaderStyle-Width, not ItemStyle-Width. Other than that, I can't think of a reason why FilterControlWidth should not work as expected, given that column widths are also set to pixel values. The provided RadGrid declaration displays OK on my side (tested with HeaderStyle-Width). Please check with Firebug or a similar tool what width styles are actually applied to the textboxes.

If the issue persists, please send a standalone runnable web page with some dummy datasource and specify your RadControls version and browser version.

Regards,
Dimo
the Telerik team

[digitall]

Still no luck - I sent the full project as a support ticket via my work account. Ticket #347229.

[Dimo]

Hi digitall,

Thanks for the runnable demo.

The problem is caused by the following setting in your ASP.NET theme:

<asp:Textbox runat="server" Width="100%" />

This should not be used in such a global scope. Please use SkinIDs or another method of controlling textbox width (e.g. CSS classes).

Best wishes,
Dimo
the Telerik team