Q3 2013 Webforms ReportViewer Messed up

[Saverio]

Hi all gurus,

I'm using for the first time ASP.NET ReportViewer in a Web Application. Things work fine, but the visualization of the viewer is screwed up. I walked thru several complaints of the same flavour, and I see my web.config is set up correctly (if it were not, and I tried changing it, visualizazion of the report is not viewable on my reportviewer page). Actually, when I surf thru my Pc (Firefox and Chrome) things are worse than with my smartphone. Report is generated and viewed the right way, but buttons which are virtually unrecognizable (i.e. unfocused and much bigger than the right way).

Any clue? I'd be very grateful if someone could help me anyway.

Saverio Tedeschi

web.config relevant rows:

    <compilation debug="true" strict="false" explicit="true" targetFramework="4.0">
      <assemblies>
        <add assembly="Microsoft.Build.Framework, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
        <add assembly="Telerik.ReportViewer.WebForms, Version=7.2.13.1016, Culture=neutral, PublicKeyToken=A9D7983DFCC261BE" />
        <add assembly="Telerik.Reporting, Version=7.2.13.1016, Culture=neutral, PublicKeyToken=A9D7983DFCC261BE" />
        <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
      </assemblies>
    </compilation>

...

  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
    <handlers>
      <add name="Telerik.ReportViewer.axd_*" path="Telerik.ReportViewer.axd" verb="*" type="Telerik.ReportViewer.WebForms.HttpHandler, Telerik.ReportViewer.WebForms, Version=7.2.13.1016, Culture=neutral, PublicKeyToken=a9d7983dfcc261be" preCondition="integratedMode" />
    </handlers>
    <validation validateIntegratedModeConfiguration="false" />
  </system.webServer>

[Stef]

Hello Saverio,

You need all settings from How to: Add report viewer to a web page in both system.web and system.webServer sections. For more suggestions, please check The styles of the web report viewer's toolbar are messed up.

Note that the old ASP.NET WebForms ReportViewer uses IFRAME elements not suitable for modern browsers. Also the viewer depends on the ASP.NET Session and ASP.NET Cache and all reports must be created based on Design Considerations for Out-proc Session State.


I hope this helps.

Regards,
Stef
Telerik by Progress

[Saverio]

Hello Stef.

1st, lot of thanks for your ready reply. However, I've already followed all directions of the quoted How2, even if I've forgotten to write the "web" section. Actually, I thinks the relevant rows in web.config were written automatically at the moment I picked the ReportViewer from the tool panel and I've released it on the design surface. Still the issue remains! I adopted a partial workaround hiding all buttons with the property page but export button and export type dropdown list; in this way, I first export the pdf and in a second moment I can print from the pdf viewer. Anyway, I would greatly prefer if the whole rendering was correct, so pls give me some advice.

Saverio

[Saverio]

Correction, or, better, clarification: "...even if I've forgotten to write the "web" section " IN MY ORIGINAL POST...

[Stef]

Hello Saverio,

You will have to trace styles in browser and the Network traffic in order to determine why the viewer's CSS is not applied or what caused icons to be misplaced and enlarged.
Possible reasons:

1. The viewer's CSS file is blocked
2. You are running in an old IE browser, and you are hitting the limit of 32 links to CSS files;
3. There are external CSS rules changing the default styles of the viewer.

Please use Fiddler to check if all files are loaded correctly, and if not check the error status. Use the browser's Developer Tools F12 to trace the styles and to eliminate external styles.

You can also test providing a custom theme for the old ASP.NET WebForms ReportViewer to check how images and styles are loaded - Applying custom skin to the web report viewer. If you prefer to use custom UI instead of the viewer's Toolbar - Custom Toolbar for the Web ReportViewer.


In all cases, use standard rendering mode in IE by adding: <meta http-equiv="X-UA-Compatible" content="IE=edge" / >. And if proving a preview is not required, you can export and print without the viewer - Print a report directly at client-side without displaying it in a Viewer.


Regards,
Stef
Telerik by Progress