| RadControls version |
Q2 2009
|
| .NET version |
3.5
|
| Visual Studio version |
2008 Professional
|
| programming language |
C#
|
| browser support |
all browsers supported by RadControls
|
HOWTO
Align chart item's gridlines with table item columns
SOLUTION
Since the report renders as intended when you export it to pdf, you just have to fix the web layout - which means, the report itself does not need to be touched (the rendered html-code does).
Luckily you have the possibility to modify the rendered html-code (i.e. the table that surrounds the chart-image, or the image-tag itself in our case).
On the .aspx page, where the ReportViewer resides, you have to add the following piece of javascript:
The function "fixReport" does exactly as it promises... it fixes the report (only when the browser is identified as IE). It does this by explicitly setting the width of the image-tag which contains the drawn chart. For this purpose I used the popular javascript-library
jQuery. For this code to work it has to be linked to your project - otherwise you may need to modify the script a little.
Also if the image-fix is not enough (maybe your layout differs a little and other problems have to be addressed) you might take a look at the two commented-out code-lines. My first approach was actually to fix the size of one or more columns, so the table aligns with the image (instead of the image aligning with the table).
When is it best to call the code? .... It can't be done immediately when the page is loaded - since it accesses an iframe which may not be populated yet (with the actual report).
jQuery once more does the trick - or rather an event built in the ReportViewer clientside component.
The
document ready handler in jQuery (created with the "$(function() {...});" statement) is called just after the page is loaded and before it is shown to the user - it is exactly where you want to put code for fixing glitches in the view of a website. Finally in our document ready handler the ReportViewer is instructed to call our "fixReport"-function when it is finally generated.
Attached to this post you find a simple web application which demonstrates the final result. All you need to do prior running it is add references to Telerik.Web.UI, Telerik.Reporting and Telerik.ReportViewer.WebForms assemblies.
Happy coding,
Wolfgang