How to modify Div class="RadChart" style="height:300px;width:400px;"

Thread is closed for posting
2 posts, 0 answers
  1. Randy
    Randy avatar
    2 posts
    Member since:
    Sep 2012

    Posted 17 Jun 2013 Link to this post

    I'm creating some Radcharts programmatically (no aspx file...it's a web part).

    I set Appearance.Dimensions.Height.Value (and .Width), and tried setting Appearance.Dimensions.AutoSize to false.

    The chart image is properly sized, but the generated HTML contains this:
    <div id="ctl00_ctl23_g_2c6dbf0b_0bfd_497c_aa14_bf4418896fcd_AverageChart" class="RadChart" style="height:300px;width:400px;">
        <img alt="" style="border-width: 0px;" ...
    </div>

    Where does the style with default height and width in the div element come from?  I add two charts to the page (using Controls.Add(averageChart); ) and they overlay each other because the html doesn't use the correct height.

    ASP.NET AJAX 2013 Q2
    .NET 3.5 Windows 2008 R2

    Thanks,
    Randy Lindsey
  2. Randy
    Randy avatar
    2 posts
    Member since:
    Sep 2012

    Posted 19 Jun 2013 Link to this post

    I found a solution.  I added the following lines of code in the PreRender event after creating the RadChart object (where _radChart1 is my RadChart object, and _chartHeight and _chartWidth are int's with a value of 480 (pixels) to define the height and 630 for the width of the chart):
             
    _radChart1.Style.Clear();
    _radChart1.Style.Add("height", _chartHeight.ToString().Trim() + "px");
    _radChart1.Style.Add("width", _chartWidth.ToString().Trim() + "px");
    (I don't know why the .Clear() doesn't work...maybe the style is getting generated
    in a later event, although putting this code into the BeforeLayout event doesn't work).

    Now the generated HTML shows this for the <div>:
    <div id="ctl00_ctl23_g_2c6dbf0b_0bfd_497c_aa14_bf4418896fcd__radChart1" class="RadChart"
      style="height:300px;width:400px;height:480px;width:630px;"> ...
      <img alt="" style="border-width: 0px;" usemap="#imctl00_ctl23_g_2c6dbf0b_0bfd_497c_aa14_bf4418896fcd__radChart1" src="ChartImage.axd?UseSession=true& ...
    </div>

    It's a little bogus because height and width are both in there twice, but according to CSS rules the last one wins so it works.

    Of note, when I added my second chart, it also picked up the default CSS:
    <div id="ctl00_ctl23_g_2c6dbf0b_0bfd_497c_aa14_bf4418896fcd_AverageChart" class="RadChart"
      style="height:300px;width:400px;">
      <img alt="" style="border-width: 0px;" ...
    </div>

    Is this possibly in the default skin or something like that?
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top