layout differences between local and published version

[ionel]

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>

[Veselin Tsvetanov]

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

[ionel]

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

 

[ionel]

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

[Veselin Tsvetanov]

Hi Ionel,

Thank you for shearing the appropriate solution for this problem.

Regards,
Veselin Tsvetanov
Telerik