This is a migrated thread and some comments may be shown as answers.

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

1 Answer 620 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 17 Jun 2013, 06:46 PM
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

1 Answer, 1 is accepted

Sort by
0
Randy
Top achievements
Rank 1
answered on 19 Jun 2013, 06:56 PM
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?
Tags
Chart (Obsolete)
Asked by
Randy
Top achievements
Rank 1
Answers by
Randy
Top achievements
Rank 1
Share this question
or