Chart within a table cell

2 posts, 0 answers
  1. Wolfgang Kamir
    Wolfgang Kamir avatar
    79 posts
    Member since:
    Jul 2006

    Posted 30 Jul 2009 Link to this post

    Requirements

    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:

    <script type="text/javascript">  
      function fixReport() {  
          var reportDoc = document.getElementById('ReportViewer1_ReportArea_ReportFrame').contentWindow.document;  
     
          var reportTable = reportDoc.getElementById('TestReport2');  
     
          var chartImg = $('img', reportTable)[0];
     
          chartImg.style.border = '0px solid white';
     
          if ($.browser.msie)  
              chartImg.style.width = '724px';  
     
    //    var columns = $('table table tbody tr:first td', reportTable);  
    //    columns[10].style.width = '60px';  
      }  
     
      $(function() {  
          ReportViewer.OnReportLoadedOld = ReportViewer.OnReportLoaded;  
          ReportViewer.prototype.OnReportLoaded = function() {  
              this.OnReportLoadedOld();  
              fixReport();  
          }  
      });  
     
    </script> 

    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

  2. Steve
    Admin
    Steve avatar
    10942 posts
    Member since:
    Feb 2014

    Posted 12 Aug 2009 Link to this post

    Hello Wolfgang,

    Thank you for the provided application - it will be of great help for other members of the Telerik community and will bring additional value to our product. I have updated your Telerik points for the involvement.

    Regards,
    Steve
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.

Back to Top