IE 8 compatibility mode issue with Telerik upgrade

4 posts, 0 answers
  1. Shrikanth
    Shrikanth avatar
    2 posts
    Member since:
    Feb 2014

    Posted 10 Feb 2014 Link to this post

    Hi,

    We recently upgrade telerik version to - 2013.2 and when we deployed to windows 2003, the page doesn't load correctly in compatibility mode, however once we remove compatibility mode, the page loads correctly, i have provided a sample image for both.

    The page contains a radsplitter, which we are thinking needs a tweak, can you please help.

    I have attached  code containing the splitter, 

    <telerik:RadSplitter ID="RadSplitter1" runat="server" BorderSize="0" Width="100%"
                        OnClientLoaded="InitializeScrollHandler">
                        <telerik:RadPane Scrolling="None" ID="navigationPane" runat="server" Width="100%"
                            OnClientResized="OnPaneResized" OnClientExpanded="OnPaneExpanded">
                            <div id="menuGrid" runat="server" name="menuGrid" style="background: url(../../Images/bgLine.JPG) repeat;
                                width: 100%">
                                <div class="buttonTop" style="width: 60px">
                                    <asp:ImageButton ID="btnUploadTask" runat="server" OnClientClick="ShowImportMenu(event); return false;"
                                        ImageUrl="~/Images/spacer.png" ToolTip="Edit Gate to use this function"></asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblImportTaskList" runat="server" Text="1. Import Task List" />
                                </div>
                                <div class="buttonTop" style="width: 60px">
                                    <asp:ImageButton ID="btnAddNewTask" runat="server" OnClientClick="openAddNewTaskWin(false); return false;"
                                        ImageUrl="~/Images/spacer.png" ToolTip="Edit Gate to use this function"></asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblAddNewTask" runat="server" Text="2. Add New Task" />
                                </div>
                                
                                <div class="buttonTop" style="width: 55px">
                                    <asp:ImageButton ID="btnAssignTeam" runat="server" OnClientClick="return false;"
                                        ImageUrl="~/Images/group.png"></asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblAssignTeam" runat="server" Text="3. Assign Team" />
                                </div>
                                <div class="buttonTop" style="width: 50px">
                                    <asp:ImageButton ID="btnActions" runat="server" OnClientClick="openSetTaskDetailsWin(null); return false;"
                                        ImageUrl="~/Images/spacer.png"></asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblSetDetails" runat="server" Text="4. Change Details" />
                                </div>
                                <div class="buttonTop" style="width: 50px">
                                    <asp:ImageButton ID="btnOtherActions" runat="server" ImageUrl="~/Images/Actions.png"
                                        OnClientClick="ShowActionMenu(event);return false;"></asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblOtherAction" runat="server" Text="5. Other Actions" />
                                </div>
                                <div class="buttonTop" style="width: 50px">
                                    <asp:ImageButton ID="btnGantt" runat="server" ImageUrl="~/Images/gantt.png" OnClientClick="CreateChart(); ExpandPane(1);">
                                    </asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblGantt" runat="server" Text="6. Gantt Graphic" />
                                </div>
                                <div class="buttonTop" style="width: 50px">
                                    <asp:ImageButton ID="btnAttachPortal" runat="server" ImageUrl="~/Images/AttachPortal.png"
                                        OnClick="btnAttachPortal_Click" OnClientClick="setEditModeValue();"></asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblAttachPortal" runat="server" Text="7. Attach Files/Links" />
                                </div>
                                <div class="buttonCenter">
                                    <asp:Image ID="imgLoading" runat="server" alt="Loading" src="../../Images/btnLoading.gif"
                                        Style="display: none" />
                                    <asp:ImageButton ID="btnApplyChanges" ImageUrl="~/Images/btnApplyChanges.jpg" OnClientClick="if(!ApplyChanges_Clicked()) return false;"
                                        OnClick="btnApplyChanges_Click" runat="server" />
                                </div>
                                <div class="buttonTopRight" style="width: 50px">
                                    <asp:ImageButton ID="btnExportToExcel" runat="server" ImageUrl="~/Images/excel_big.png"
                                        OnClientClick="openExportGate(); SetFillGrid(); return false;"></asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblExportToExcel" runat="server" Text="Export with Gantt" />
                                </div>
                                <div class="buttonTopRight" style="width: 50px">
                                    <asp:ImageButton ID="btnExportReport" runat="server" ImageUrl="~/Images/export_import icon.png"
                                        OnClientClick="openExportReport(); SetFillGrid(); return false;"></asp:ImageButton>
                                    <br />
                                    <asp:Label ID="lblExportReport" runat="server" Text="Export Task List" />
                                </div>
                                <div style="clear: both;">
                                </div>
                            </div>
                            <div runat="server" id="divGrid" class="container" style="width: 100%; overflow: auto;">
                                <rgv:RGridView ID="gvTasks" runat="server" AutoGenerateColumns="false" Style="padding: 10px"
                                    Width="1000px" DataKeyNames="Id" BackColor="White" OnRowDataBound="gvTasks_RowDataBound"
                                    OnRowCreated="gvTasks_RowCreated" AllowPaging="true" PageSize="41" OnPageIndexChanged="gvTasks_OnPageIndexChanged">
                                    <HeaderStyle BackColor="#7DA5E0" Height="30px" ForeColor="Black" />
                                    <RowStyle Height="35px" />
                                    <Columns>
                                        <%--Column #1--%>
                                        <asp:TemplateField>
                                            <HeaderTemplate>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <asp:CheckBox ID="cbSelectAll" runat="server" Visible="false" />
                                                <asp:CheckBox ID="chkSelect" runat="server" />
                                                <div style="font-size: 10px; color: Black; font-weight: bold">
                                                    <asp:LinkButton ID="btnClearFilter" runat="server" OnClientClick="setEditModeValue();"
                                                        OnClick="btnClearFilter_Click" Text="Clear Filter" ToolTip="Clear Filter" Visible="false"></asp:LinkButton>
                                                    &#160;
                                                </div>
                                                <asp:Label ID="lblId" runat="server" Style="display: none;" Text='<% #DataBinder.Eval(Container.DataItem, "Id") %>' />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <%--Column #2--%>
                                        <asp:TemplateField HeaderStyle-Width="23px">
                                            <ItemTemplate>
                                                &nbsp;&nbsp;<img runat="server" id="imgEdit" style="cursor: pointer" src="../../Images/Edit.gif"
                                                    alt="edit" />&nbsp;&nbsp;
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <%--Column #3--%>
                                        <asp:TemplateField HeaderText="&nbsp;&nbsp;# ♦&nbsp;&nbsp;" HeaderStyle-Width="20px">
                                            <ItemTemplate>
                                                &nbsp;&nbsp;<asp:Label ID="ctrCode" Width="30px" runat="server" Text=""></asp:Label>&nbsp;
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <%--Column #4--%>
                                        <asp:TemplateField HeaderText="&nbsp;&nbsp;Task Status&nbsp;&nbsp;" HeaderStyle-Width="80px">
                                            <ItemTemplate>
                                                &nbsp;<asp:DropDownList ID="ctrStatus" CssClass="dropDown" runat="server">
                                                </asp:DropDownList>
                                                <asp:DropDownList ID="ctrStatus_Filter" runat="server" CssClass="dropDown" AutoPostBack="true"
                                                    OnSelectedIndexChanged="ddlGenericFilter_SelectedIndexChanged" onclick="SaveCurrentSelectedValue(this);"
                                                    onchange="if(!IndexChanged(this)) return false;" Visible="false">
                                                </asp:DropDownList>
                                                &nbsp;&nbsp;
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        
                                    </Columns>
                                </rgv:RGridView>
                                <table>
                                    <tr>
                                        <td>
                                            <asp:TextBox ID="txtPageSize" runat="server" Width="25px" Height="21px" Style="vertical-align: top;"
                                                ToolTip="Max 100" MaxLength="3" onkeypress="return onlyNumbers();" ValidationGroup="PageSize" />
                                        </td>
                                        <td>
                                            <asp:ImageButton ID="imgPageSize" runat="server" ImageUrl="~/Images/setPageSize.png"
                                                ToolTip="Max 100" OnClientClick="DontSetPageSizeText();" OnClick="imgPageSize_Click"
                                                ValidationGroup="PageSize" />
                                        </td>
                                        <td>
                                            <asp:Label ID="lblMessage" runat="server" ForeColor="Red" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Both"></telerik:RadSplitBar>
                        <telerik:RadPane ID="contentPane" runat="server" Scrolling="Both" Collapsed="true"
                            OnClientBeforeExpand="LoadGantt" OnClientBeforeCollapse="HideGantt" Width="300px">
                            <div style="padding-top: 70px">
                                
                            </div>
                            
                        </telerik:RadPane>
                    </telerik:RadSplitter>

    Thanks
    Shri


  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 13 Feb 2014 Link to this post

    Hello Shri,

    I am afraid that the provided information was not enough to reproduce and determine the cause of the issue. Could you try to isolate the issue into a sample runnable project including all needed references, so we could examine it locally? Detailed information on how to prepare such is available here: Filter files and download

    Regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shrikanth
    Shrikanth avatar
    2 posts
    Member since:
    Feb 2014

    Posted 18 Feb 2014 in reply to Vessy Link to this post

    Hi Veselina,

    Sorry, we couldn't prepare a sample project, as we were fire fighting since we already deployed to production. The good news is we were able to fix the issue by adding the following meta tag in the HTTP Header inside IIS.

    X-UA-Compatible: IE=8

    This is turning off the compatible mode in browser and also sets the Document standards to IE8 in-case of IE9 or higher. 
  5. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 20 Feb 2014 Link to this post

    Hi Shrikanth,

    I am glad that you have managed to workaround the issue. Feel free to contact us in case any further questions appear.

    Kind regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top