I dont know why I cant set width in percentage i.e. when i am set the width <telerik:radchart width = "100%" its gives me error.
Is there any easy way to set the width as per resolution or set the width in percentage?
Please do the needful.
Thanks & Regards,
Shankar Gidwani
Is there any easy way to set the width as per resolution or set the width in percentage?
Please do the needful.
Thanks & Regards,
Shankar Gidwani
4 Answers, 1 is accepted
0
Hi shankar,
I would suggest you use the following javascript snippet:
Regards,
Evgenia
the Telerik team
I would suggest you use the following javascript snippet:
<
script
type
=
"text/javascript"
>
window.onload = AdjustChartImage;
function AdjustChartImage()
{
var chart = window["<%=RadChart1.ClientID%>"];
var chartImg = chart.childNodes[0];
chartImg.style.width = chart.parentNode.offsetWidth;
chartImg.style.height = chart.parentNode.offsetWidth;
}
</
script
>
Regards,
Evgenia
the Telerik team
0
Uday
Top achievements
Rank 1
answered on 09 Oct 2013, 12:01 PM
Hi Evgenia
,
The Javascript snippet to set the chart width to 100% works fine in IE8 but not in IE9 and later versions. Can you please help how do I achieve the same in IE9 and later versions.
Thanks & Regards,
Uday Kumar
,
The Javascript snippet to set the chart width to 100% works fine in IE8 but not in IE9 and later versions. Can you please help how do I achieve the same in IE9 and later versions.
Thanks & Regards,
Uday Kumar
0
Denis
Top achievements
Rank 1
answered on 10 Mar 2014, 07:59 PM
Hello Evgenia,
I have relatively the same issue but my Chart is inside a UserControl .ascx file?? window["<%=RadChart1.ClientID%>"] gives me a compile error. and if I use reference id "<%=ByYearLine.ClientID%>" of the .ascx file Javascript gives me var chart = undefined. And to make you beat your head agents the wall it all sits inside a DevExpress image slider.
I have relatively the same issue but my Chart is inside a UserControl .ascx file?? window["<%=RadChart1.ClientID%>"] gives me a compile error. and if I use reference id "<%=ByYearLine.ClientID%>" of the .ascx file Javascript gives me var chart = undefined. And to make you beat your head agents the wall it all sits inside a DevExpress image slider.
<
table
class
=
"DashChartsa"
width
=
"50%"
border
=
"1"
style
=
"float: left;"
>
<
tr
align
=
"center"
>
<
td
class
=
"RelatedAssoc"
>
<
div
style
=
"width: 100%"
>
<%-- Styles-ImageArea-Height="260px" Styles-ImageArea-Width="400px" --%>
<
dx:ASPxImageSlider
ID
=
"ASPxImageSlider4"
runat
=
"server"
ClientInstanceName
=
"ImageSlider4"
EnableViewState
=
"False"
EnableTheming
=
"False"
NavigateUrlFormatString
=
"javascript:void({0});"
>
<
ClientSideEvents
Init
=
"OnInit"
/>
<
SettingsImageArea
ImageSizeMode
=
"FillAndCrop"
NavigationButtonVisibility
=
"None"
ItemTextVisibility
=
"Always"
/>
<
SettingsNavigationBar
Mode
=
"Dots"
/>
<
SettingsSlideShow
AutoPlay
=
"False"
StopPlayingWhenPaging
=
"false"
PausePlayingWhenMouseOver
=
"false"
PlayPauseButtonVisibility
=
"Faded"
></
SettingsSlideShow
>
<
Items
>
<
dx:ImageSliderItem
>
<
Template
>
<
asp:UpdatePanel
ID
=
"upByYearLine"
runat
=
"server"
>
<
ContentTemplate
>
<
evt:ByYearLine
ID
=
"ByYearLine"
runat
=
"server"
/>
</
ContentTemplate
>
</
asp:UpdatePanel
>
</
Template
>
</
dx:ImageSliderItem
>
</
Items
>
</
dx:ASPxImageSlider
>
</
div
>
</
td
>
</
tr
>
</
table
>
I've also tried this code.
window.onload = AdjustChartImage;
function
AdjustChartImage() {
var
chart = document.getElementsByTagName(
'<%= ByYearLine.ClientID %>'
).item[1];;
alert(chart);
//var chartImg = chart.childNodes[0];
//chartImg.style.width = chart.parentNode.offsetWidth;
//chartImg.style.height = chart.parentNode.offsetWidth;
}
here is what Chrome gives me
<
td
class
=
"RelatedAssoc"
>
<
div
style
=
"width: 100%"
>
<
input
type
=
"hidden"
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4H"
name
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4H"
value
=
"0|0"
><
div
class
=
"dxisControl"
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4"
style
=
"width: 760px; height: 505px;"
tabindex
=
"0"
>
<
div
class
=
"dxis-passePartout"
style
=
"width: 660px; height: 452px;"
><
div
class
=
"dxis-imageArea"
style
=
"top: 0px; width: 660px; height: 452px;"
><
div
class
=
"dxis-slidePanel"
style
=
"width: 660px; height: 452px; left: 0px;"
><
div
class
=
"dxis-item"
style
=
"background-image: url(http://localhost:54919/DXR.axd?r=1_10-VUGi8); width: 660px; height: 452px; left: 0px;"
>
<
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_upByYearLine"
>
<
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1"
class
=
"RadChart"
style
=
"height:300px;width:400px;"
>
<!-- 2013.3.1324.45 -->
<
img
alt
=
""
style
=
"border-width: 0px;"
usemap
=
"#imctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1"
src
=
"ChartImage.axd?UseSession=true&ChartID=f9346d72-6c99-42d1-86ef-4fc2574f78d9_chart_ctl00$MainCallbackPanel$ContentCallbackPanel$ContentPanel$ContentPlaceHolder$ASPxImageSlider4$IT0$ByYearLine$RadChart1&imageFormat=Png&random=b22ebc39-5499-4fa2-9719-29474411c6c3"
onerror
=
"if(confirm('Error loading RadChart image.\nYou may also wish to check the ASP.NET Trace for further details.\nDisplay stack trace?'))window.location.href=this.src;"
><
input
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1_ClientState"
name
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1_ClientState"
type
=
"hidden"
>
</
div
>
<
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1"
style
=
"display:none;position:absolute;"
>
<
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1RTMPanel"
>
</
div
><
input
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1_ClientState"
name
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1_ClientState"
type
=
"hidden"
>
</
div
>
</
div
>
</
div
></
div
></
div
><
div
class
=
"dxis-playPauseBtnWrapper"
style
=
"opacity: 0.30000001192092896;"
><
div
class
=
"dxWeb_isPlayBtn dxis-playPauseBtn"
>
</
div
><
div
class
=
"dxWeb_isPauseBtn dxis-playPauseBtn"
style
=
"display: none;"
>
</
div
></
div
></
div
><
div
class
=
"dxis-nbDotsBottom"
style
=
"width: 660px; height: 13px;"
><
div
class
=
"dxis-nbSlidePanelWrapper"
style
=
"width: 660px; height: 13px;"
><
div
class
=
"dxis-nbSlidePanel"
style
=
"width: 13px; height: 13px; left: 323.5px;"
><
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_dot_0"
class
=
"dxWeb_isDot dxis-nbDotItem dxis-nbDotItemSelected dxWeb_isDotSelected"
savedselectedstateitemsrc
=
"[object Object]"
src
=
"/DXR.axd?r=1_10-VUGi8"
savedselectedstateitemclassname
=
"dxWeb_isDot dxis-nbDotItem dxis-nbDotItemSelected"
style
=
"width: 13px; height: 13px; left: 0px;"
></
div
></
div
></
div
></
div
></
div
><
script
id
=
"dxss_2141877661"
type
=
"text/javascript"
>
<!--
var dxo = new ASPxClientImageSlider('ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4');
window['ImageSlider4'] = dxo;
dxo.uniqueID = 'ctl00$MainCallbackPanel$ContentCallbackPanel$ContentPanel$ContentPlaceHolder$ASPxImageSlider4';
dxo.Init.AddHandler(OnInit);
dxo.hasTemplates = true;
dxo.imageLoadMode = 0;
dxo.itemClasses = 'dxis-item';
dxo.imageAreaClasses = 'dxis-imageArea';
dxo.imageSizeMode = 2;
dxo.navigationBtnsVisibility = 0;
dxo.itemTextAreaClasses = 'dxis-itemTextArea';
dxo.playPauseButtonVisibility = 1;
dxo.playBtnHtml = '<
div
class
=
"dxWeb_isPlayBtn dxis-playPauseBtn"
>\r\n\r\n</
div
>';
dxo.pauseBtnHtml = '<
div
class
=
"dxWeb_isPauseBtn dxis-playPauseBtn"
>\r\n\r\n</
div
>';
dxo.navigationBarClasses = 'dxis-nbDotsBottom';
dxo.navigationBarMode = 1;
dxo.dotBtnHtml = '<
div
class
=
"dxWeb_isDot dxis-nbDotItem"
>\r\n\r\n</
div
>';
dxo.dotItemHoverClasses = 'dxis-nbDotItemHover';
dxo.dotItemHoverSpriteObj = ({'spriteCssClass':'dxWeb_isDotHover'});
dxo.dotItemPressedClasses = 'dxis-nbDotItemPressed';
dxo.dotItemPressedSpriteObj = ({'spriteCssClass':'dxWeb_isDotPressed'});
dxo.dotItemSelectedClasses = 'dxis-nbDotItemSelected';
dxo.dotItemSelectedSpriteObj = ({'spriteCssClass':'dxWeb_isDotSelected'});
dxo.thumbnailNavigationBtnsVisibility = 0;
dxo.InlineInitialize();
//-->
</
script
><
script
id
=
"dxss_494449719"
type
=
"text/javascript"
>
<!--
dxo.items = [{'template':'\r\n <
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_upByYearLine"
>\r\n\t\r\n <
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1"
class
=
"RadChart"
style
=
"height:300px;width:400px;"
>\r\n\t\t<!-\- 2013.3.1324.45 -\-><
img
alt=\'\' style=\'border-width: 0px;\' usemap=\'#imctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1\' src=\'ChartImage.axd?
UseSession
=
true
&
ChartID
=
f9346d72
-6c99-42d1-86ef-4fc2574f78d9_chart_ctl00$MainCallbackPanel$ContentCallbackPanel$ContentPanel$ContentPlaceHolder$ASPxImageSlider4$IT0$ByYearLine$RadChart1&
imageFormat
=
Png
&
random
=
b22ebc39
-5499-4fa2-9719-29474411c6c3\'
onerror
=
"if(confirm(\'Error loading RadChart image.\\nYou may also wish to check the ASP.NET Trace for further details.\\nDisplay stack trace?\'))window.location.href=this.src;"
/><
input
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1_ClientState"
name
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadChart1_ClientState"
type
=
"hidden"
/>\r\n\t</
div
>\r\n\r\n\r\n<
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1"
style
=
"display:none;position:absolute;"
>\r\n\t\t<
div
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1RTMPanel"
>\r\n\r\n\t\t</
div
><
input
id
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1_ClientState"
name
=
"ctl00_MainCallbackPanel_ContentCallbackPanel_ContentPanel_ContentPlaceHolder_ASPxImageSlider4_IT0_ByYearLine_RadToolTipManager1_ClientState"
type
=
"hidden"
/>\r\n\t</
div
>\r\n \r\n</
div
>\r\n '}];
//-->
</
script
>
</
div
>
</
td
>
Would love to get your thoughts on this one.
Thanks,
Denis
0
Hi Denis,
Please find below an example on how this can be achieved with RadChart inside RadSplitter.
JavaScript:
ASPX:
You can also find the full runnable VS example in the attached archive.
Regards,
Danail Vasilev
Telerik
Please find below an example on how this can be achieved with RadChart inside RadSplitter.
JavaScript:
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function ResizeChart(sender, args) {
var chart = $get("<%= RadChart1.ClientID %>");
var chartimg = chart.getElementsByTagName("img")[0];
chartimg.setAttribute("width", sender.get_width() + "px");
chartimg.setAttribute("height", sender.get_height() + "px");
}
</
script
>
</
telerik:RadScriptBlock
>
<
telerik:RadSplitter
ID
=
"RadSplitter1"
runat
=
"server"
>
<
telerik:RadPane
ID
=
"LeftPane"
runat
=
"server"
Width
=
"10px"
Scrolling
=
"none"
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"Radsplitbar2"
runat
=
"server"
></
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"MiddlePane1"
runat
=
"server"
Height
=
"800px"
Width
=
"600px"
>
<
telerik:RadSplitter
ID
=
"Radsplitter3"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
Orientation
=
"Horizontal"
>
<
telerik:RadPane
ID
=
"Radpane4"
runat
=
"server"
Height
=
"100%"
Width
=
"100%"
Scrolling
=
"none"
OnClientResized
=
"ResizeChart"
>
<
telerik:RadChart
ID
=
"RadChart1"
runat
=
"server"
>
<
Series
>
<
telerik:ChartSeries
>
<
Items
>
<
telerik:ChartSeriesItem
YValue
=
"3"
>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
YValue
=
"6"
>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
YValue
=
"2"
>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
YValue
=
"1"
>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
YValue
=
"5"
>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
YValue
=
"4"
>
</
telerik:ChartSeriesItem
>
</
Items
>
</
telerik:ChartSeries
>
</
Series
>
</
telerik:RadChart
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"Radsplitbar3"
runat
=
"server"
></
telerik:RadSplitBar
>
<
telerik:RadPane
ID
=
"Radpane5"
runat
=
"server"
Height
=
"50px"
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
You can also find the full runnable VS example in the attached archive.
Regards,
Danail Vasilev
Telerik
DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.