Inconsistent command item rendering varying between DIV and Table layout

4 posts, 1 answers
  1. Bryan
    Bryan avatar
    8 posts
    Member since:
    May 2016

    Posted 06 Jun Link to this post

    I am using the built-in Export to Excel and Refresh buttons. Strangely when deployed to local and remote environment the layout differs - DIV at local and Table TR for remote, out of the same code base. The left aligned layout, one shown in the first screen capture, is the desired outcome. Can confirm this absurd behaviour is only present on IE (Same browser configuration on different terminals used to test both environments and had consistent results) - Chrome and Firefox have been tested to be rendering the desired layout on both environment.

    Here is my RadGrid markup:

    <asp:Panel ID="pnlMainReport" runat="server">
                   <telerik:RadGrid ID="rgRecReport" runat="server" DataSourceID="dsRec" AllowAutomaticUpdates="False" 
                       RenderMode="Lightweight" AllowMultiRowSelection="false"
                       Skin="Metro"  AllowPaging="true"
                      OnItemDataBound="rgRecReport_ItemDataBound"
                       CssClass="RemoveBorders">
                       <ClientSettings EnableAlternatingItems="false" EnableRowHoverStyle="true">
                           <Selecting AllowRowSelect="true" />
                           <ClientEvents OnRowClick="ReportContextMenu" OnRowContextMenu="ReportContextMenu" />
                       </ClientSettings>
                       <MasterTableView AutoGenerateColumns="False" DataSourceID="dsRec" DataKeyNames="ResultTableName"   PageSize="100"  
                           CommandItemDisplay="Top"  CommandItemSettings-ShowExportToExcelButton="true" CommandItemSettings-ExportToExcelImageUrl="~/images/excel.png" CommandItemSettings-ShowAddNewRecordButton="false">

    HTML of the incorrect layout on IE:

    <tr>
                                        <td align="left"> </td><td align="right"><input name="rgRecReport$ctl00$ctl02$ctl00$RefreshButton" title="Refresh" class="rgRefresh" id="rgRecReport_ctl00_ctl02_ctl00_RefreshButton" onclick="javascript:__doPostBack('rgRecReport$ctl00$ctl02$ctl00$RefreshButton','')" type="button" value=" "><a id="rgRecReport_ctl00_ctl02_ctl00_RebindGridButton" href="javascript:__doPostBack('rgRecReport$ctl00$ctl02$ctl00$RebindGridButton','')">Refresh</a>   |   <a id="rgRecReport_ctl00_ctl02_ctl00_ExportToExcelButton" href="javascript:__doPostBack('rgRecReport$ctl00$ctl02$ctl00$ExportToExcelButton','')"><img style="border: 0px currentColor; border-image: none;" alt="" src="/images/excel.png"> Export to Excel</a>  </td>
                                    </tr>

  2. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 08 Jun Link to this post

    Hello,

    I suppose that the issue you are facing comes form the fact that in the problematic case the applictaion runs in compatibility mode of the IE browser which restore to IE7 and the Lightweight RenderMode and the Material skin does not work in it as they are supported for the newer versions of IE.
    Please check if this is the case on your and and force the IE to run in the correct mode.

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bryan
    Bryan avatar
    8 posts
    Member since:
    May 2016

    Posted 08 Jun Link to this post

    Thanks for that Maria.

    We indeed got the IE 11 compatibility tag up first in the header but somehow it was ignored...

    Unchecking "Display Intranets in Compatibility View" in the menu solved the problem.

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 13 Jun Link to this post

    Hi Bryan,

    I'm glad you were able to fix the issue on your end. Do not hesitate to contact us back in case further assistance is needed.

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top