layout differences between local and published version

5 posts, 0 answers
  1. ionel
    ionel avatar
    4 posts
    Member since:
    Sep 2015

    Posted 25 May 2016 Link to this post

    Hi,

    I'm using OrgChart in one project to display some hierarchies. To adapt the look of it to my project design i'm using the code posted below.

    Now, locally it works fine on all browsers I test it (chrome, IE 11, Firefox). If I publish it on the server (IIS 8.5 .NET 4.5) the look on IE change badly.(on other browsers looks fine)

    Attached , the images with differences.

    Remarks:

    • I force latest compatibility in header: <meta http-equiv="X-UA-Compatible" content="IE=edge"> so it is not a compatibility issue
    • AppPool is set to "Integrated" .NET CLR 4.0 no other special configurations
    • I use the latest update of telerik toolkit.
    • I had a similar  problem with RadTreeView, on IE11 the "plus/minus" default images were not displayed. that one i fix it with custom images from css but in this case will be a bit harder. 
    • RadOrg layout is fine using standard "look and feel"

    Thank you, 

    Ionel

     

     

    html .RadOrgChart_Default .rocItemContent,
           html .RadOrgChart_Default .rocItemTemplate {
               /*background-color: rgba(255,255,255,0.2);*/
               background-image: none;
               /*color: white;*/
               border:none;
               background:none;
               width:auto;
               min-width:300px;
               height:auto;
     
    }
    <telerik:RadOrgChart RenderMode="Lightweight" ID="RadOrgChartHorizontal" runat="server"
                       DataSourceID="SQLDataSourceHorizontalHierarchy"
                           DataFieldID="Contract_Key"
                           DataFieldParentID="Contract_Parent_Key"
                           DataTextField="Name"  EnableCollapsing="True" EnableGroupCollapsing="True"  Orientation="Horizontal">
                           <ItemTemplate >
                               <section class="panel panel-featured panel-featured-tertiary">
                                   <div class="panel-body">
                                       <div class="widget-summary">
     
                                           <div class="widget-summary-col">
                                               <div class="summary">
                                                   <h4 class="amount"><%#Eval("Name")%></h4>
                                                   <div class="info">
                                                       <strong class="title"><%#Eval("Contract_Type_Name")%></strong>
                                                       <span class="text-primary">(<%#Eval("Contract_Type_Category")%>)</span>
                                                   </div>
                                               </div>
                                               <div class="summary-footer">
                                                   <a class="text-muted text-uppercase">Details</a>
                                               </div>
                                           </div>
                                       </div>
                                   </div>
                               </section>
                           </ItemTemplate>
                           <RenderedFields>
                               <NodeFields>
                                   <telerik:OrgChartRenderedField DataField="Name" Label="Name" />
                               </NodeFields>
                               <ItemFields>
                                   <telerik:OrgChartRenderedField DataField="Contract_Type_Category" Label="Category" />
                               </ItemFields>
                               <ItemFields>
                                   <telerik:OrgChartRenderedField DataField="Contract_Type_Name" Label="Type" />
                               </ItemFields>
                           </RenderedFields>
                       </telerik:RadOrgChart>

  2.
  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    947 posts

    Posted 30 May 2016 Link to this post

    Hi Ionel,

    As far as I can see, the deployed application, opened in IE forces the radOrgChart to be rendered in Classic RenderMode. This also forces the Orientation to be Vertical instead of Horizontal.

    The problem that you have experienced with RadTreeView also seems to be related to RenderModes, as in Lightweight the expand / collapse sign is a font icon and not an image / sprite (as it is in Classic RM).

    The observed issues point to the suggestion that in some way the Compatibility mode is turned on for IE. When in Compatibility mode / view (which is actually IE 7 emulation), the RadOrgChart and the RadTreeView are forced to be rendered in Classic RM. 

    In case that you observe the problem after openning the local and the deployed version of the application in the same browser, I would suggest you review the settings on server you are deploying on, Which may force the application to run in Compatibility view. Keep in mind that IE 7 (and Compatibility view) are no longer supported by the Telerik ASP.NET AJAX suite.

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. ionel
    ionel avatar
    4 posts
    Member since:
    Sep 2015

    Posted 30 May 2016 in reply to Veselin Tsvetanov Link to this post

    Hi Vaselin, 

    Thank you for the answer.

    Indeed seems to be a problem with compatibility. But the compatibility is forced by user-agent-string , like it is explained in this post:

    http://www.telerik.com/blogs/how-to-get-your-asp.net-application-working-in-ie11 

    Unfortunately the solution did not work for me. It remain for me to investigate how the compatibility is forced from the server, probably a policy. 

    Best regards,

    Ionel

     

  7. ionel
    ionel avatar
    4 posts
    Member since:
    Sep 2015

    Posted 30 May 2016 Link to this post

    Hi, 

    Maybe this will be useful for somebody, I fixed the issue by replacing the user-agent force by compatibility with the correct one, using  URL Rewrite. 

    Example here: http://www.sinclairinat0r.com/2014/03/14/spoofing-ie10s-user-agent-in-iis-for-ie11-support-in-sharepoint-2013/

    Best regards,

    Ionel

  8.
  9. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    947 posts

    Posted 31 May 2016 Link to this post

    Hi Ionel,

    Thank you for shearing the appropriate solution for this problem.

    Regards,
    Veselin Tsvetanov
    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