RadGrid Filter Box Layout Issue

[Jose]

I have an issue related to how the filter boxes display.  Image attached of example.  Anyone have any thoughts on why this would happen. 

[Venelin]

Hello Jose,

Could you please send your markup and style sheets related (if any) so we can review them? Also, in which browser does this happen? I suspect that this is in IE7/IE Compatibility view mode, but we should clarify it.

Regards,
Venelin
Telerik

 

 

[Jose]

Hi, please see below..  This issue is happening with IE 9.


<%@ Control Language="VB" AutoEventWireup="false" CodeFile="PaymentsHistoryCtrl.ascx.vb"
    Inherits="LawDrill.UI.Web.Controls_PaymentsHistoryCtrl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<style type="text/css">
    A:link
    {
        color: #003399;
    }
</style>
<link href="../Styles1.css" type="text/css" rel="stylesheet" />
<table id="Table1" cellspacing="0" cellpadding="2" width="100%" border="0">
    <%-- <tr>
        <td align="right">
            <div id="divExcel" runat="server">
                <asp:ImageButton ID="ExcelImgButton" runat="server" ImageUrl="../images/excel.gif"
                    Height="16px" ToolTip="Export To Excel" Width="16px"></asp:ImageButton>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        </td>
    </tr>--%>
    <tr>
        <td>
            <p>
                <telerik:RadGrid ID="dataGrid1" runat="server" Skin="WebBlue" Width="100%"
                    ShowFooter="True" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True">
                    <ExportSettings ExportOnlyData="True" IgnorePaging="True" HideStructureColumns="True"
                        OpenInNewWindow="True">
                        <Excel Format="ExcelML" />
                        <Excel Format="ExcelML"></Excel>
                    </ExportSettings>
                    <MasterTableView CommandItemDisplay="Top">
                        <CommandItemTemplate>
                            <div>
                                <asp:ImageButton ID="ExcelImgButton2" OnClick="btnExcelExport_Click" runat="server"
                                    ToolTip="Export To Excel" ImageUrl="../images/excel2013.png" Width="25px" Height="25px"
                                    BorderWidth="1px" Visible="True"></asp:ImageButton>
                            </div>
                        </CommandItemTemplate>
                        <HeaderStyle Height="50" />
                        <ColumnGroups>
                            <telerik:GridColumnGroup Name="BillPaid" HeaderText="Bill Paid" HeaderStyle-HorizontalAlign="Center">
                                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                            </telerik:GridColumnGroup>
                            <telerik:GridColumnGroup Name="Credits" HeaderText="Credits" HeaderStyle-HorizontalAlign="Center">
                                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                            </telerik:GridColumnGroup>
                        </ColumnGroups>
                        <CommandItemSettings ExportToPdfText="Export to PDF" ShowExportToExcelButton="True"
                            ShowExportToPdfButton="False" ShowExportToWordButton="False" ShowAddNewRecordButton="False"
                            ShowRefreshButton="False"></CommandItemSettings>
                        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                        </ExpandCollapseColumn>
                        <Columns>
                            <telerik:GridBoundColumn DataField="source_tran_uno" UniqueName="source_tran_uno"
                                Display="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="tran_date" HeaderText="Date" DataFormatString="{0:d}"
                                FilterControlWidth="40">
                                <HeaderStyle HorizontalAlign="Center" />
                                <FooterStyle HorizontalAlign="Right" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="tran_type" HeaderText="Tran Type" FilterControlWidth="20">
                                <ItemStyle HorizontalAlign="Center" />
                                <HeaderStyle HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="payment_type" HeaderText="Tran Desc" FilterControlWidth="50">
                                <ItemStyle HorizontalAlign="Center" />
                                <HeaderStyle HorizontalAlign="Center" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="fees_paid" HeaderText="Fees" ColumnGroupName="BillPaid"
                                DataFormatString="{0:C}" FilterControlWidth="45" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="disb_paid" HeaderText="Cost" ColumnGroupName="BillPaid"
                                DataFormatString="{0:C}" FilterControlWidth="40" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="oafee_paid" HeaderText="O/A Fees" ColumnGroupName="BillPaid"
                                DataFormatString="{0:C}" FilterControlWidth="40" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="oadisb_paid" HeaderText="O/A Disb" ColumnGroupName="BillPaid"
                                DataFormatString="{0:C}" FilterControlWidth="40" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="retainer_paid" HeaderText="Retainer" ColumnGroupName="BillPaid"
                                DataFormatString="{0:C}" FilterControlWidth="40" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="other_paid" HeaderText="Other" ColumnGroupName="BillPaid"
                                DataFormatString="{0:C}" FilterControlWidth="40" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridHyperLinkColumn AllowSorting="False" DataNavigateUrlFields="bill_link"
                                DataNavigateUrlFormatString="drilldown.aspx?DDDepth=1&DDType=77&dtMethod=F&cmcode={0}"
                                Target="newWinChild2" FilterControlAltText="Filter Matter column" HeaderText="Bills"
                                UniqueName="bill_link" DataTextField="bill_link" HeaderStyle-HorizontalAlign="Center">
                                <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                            </telerik:GridHyperLinkColumn>
                            <telerik:GridBoundColumn DataField="unapplied_credit" HeaderText="On Acct/Unapplied"
                                ColumnGroupName="Credits" DataFormatString="{0:C}" FilterControlWidth="45" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="retainer_credit" HeaderText="Retainer" ColumnGroupName="Credits"
                                DataFormatString="{0:C}" FilterControlWidth="40" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="net_receipts" HeaderText="Net Receipts" DataFormatString="{0:C}"
                                FilterControlWidth="40" Aggregate="Sum">
                                <FooterStyle HorizontalAlign="Right" />
                                <HeaderStyle HorizontalAlign="Center" />
                                <ItemStyle HorizontalAlign="Right" />
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="remarks" HeaderText="Remarks">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <EditFormSettings>
                            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                            </EditColumn>
                        </EditFormSettings>
                        <PagerStyle PageSizeControlType="RadComboBox" Position="TopAndBottom"></PagerStyle>
                    </MasterTableView>
                    <PagerStyle PageSizeControlType="RadComboBox" Position="TopAndBottom"></PagerStyle>
                    <FilterMenu EnableImageSprites="False">
                    </FilterMenu>
                </telerik:RadGrid>
            </p>
        </td>
    </tr>
</table>
<asp:Label ID="lblNoData" runat="server" CssClass="ClientSearchLabel2" Text="No Data To Display"
    Visible="False"></asp:Label>

[Venelin]

Hi Jose,

I was not able to replicate the described issue based on the provided code only. Please find attached my test page and run it in order to see if the issue replicates on your side. Also check if you have specified a doctype. It is very important to have a valid doctype and it has to be the first thing on the page (IE does not even allow comments before it, keep this in mind). Here are the recommended doctypes from W3C: http://www.w3.org/QA/2002/04/valid-dtd-list.html

I am looking forward to your reply.

Regards,
Venelin
Telerik

 

 

[Jose]

Thanks for your response.  I was not aware the ASCX files required a doctype.  Is this really the case or were you thinking it is a ASPX file?  Please advise.

[Venelin]

Hi Jose,

The doctype is mandatory for the rendered page, not for the server page. This means if you have a master page and other pages you define a doctype only for the master page. If you have an aspx page and user controls in it, you have to specify a doctype for the aspx page alone, not for every user control (ascx file).

Regards,
Venelin
Telerik