I am trying to hide and show RadHtmlChart based on selection of dropdown. It works fine (hides and shows) unless i set style="display:none;", in that case it does not show itself. Not sure if it matters, but I load control not on Page_Load, but on Button click.
This is another annoyance with Telerik controls that drives me bananas.
Please suggest something
<telerik:RadHtmlChart runat="server" ID="pieChart" style="display:none;"
Width="1100px" Height="580px"
Transitions="true">
<ChartTitle Text="" >
<Appearance Align="Center" Position="Top" Visible="false">
<TextStyle Bold="true"/>
</Appearance>
</ChartTitle>
<Legend>
<Appearance Position="Right" Visible="false"></Appearance>
</Legend>
<PlotArea>
<Series>
<telerik:PieSeries DataFieldY="TotalEmploymentOM" NameField="IndustryName">
<LabelsAppearance Position="OutsideEnd" DataField="IndustryName">
</LabelsAppearance>
<TooltipsAppearance Color="White" DataFormatString="{0:N0}"/>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
function onchange_ddlSelectionOM() {
var ddltext = $('option:selected', $('#ddlSelectionOM')).text();
if (ddltext == "Pie") {
document.getElementById("<%=grdOM.ClientID %>").style.display = "none";
document.getElementById("<%=chartJobsBySectorAnnualOM.ClientID %>").style.display = "none";
document.getElementById("<%=pieChart.ClientID %>").style.display = "";
}
}
2 Answers, 1 is accepted
Hello David,
You need to call the repaint() method of the chart after showing its initially hidden container. Here is a basic example:
<telerik:RadHtmlChart runat="server" ID="pieChart" Style="display: none;" Width="1100px" Height="580px" Transitions="true"> <ChartTitle Text=""> <Appearance Align="Center" Position="Top" Visible="false"> <TextStyle Bold="true" /> </Appearance> </ChartTitle> <Legend> <Appearance Position="Right" Visible="false"></Appearance> </Legend> <PlotArea> <Series> <telerik:PieSeries> <SeriesItems> <telerik:PieSeriesItem Y="1" Name="one" /> <telerik:PieSeriesItem Y="2" Name="two" /> <telerik:PieSeriesItem Y="3" Name="three" /> </SeriesItems> <LabelsAppearance Position="OutsideEnd"> </LabelsAppearance> <TooltipsAppearance Color="White" DataFormatString="{0:N0}" /> </telerik:PieSeries> </Series> </PlotArea></telerik:RadHtmlChart><telerik:RadDropDownList runat="server" ID="ddlSelectionOM" OnClientSelectedIndexChanged="onchange_ddlSelectionOM"> <Items> <telerik:DropDownListItem Text="one" /> <telerik:DropDownListItem Text="Pie" /> </Items></telerik:RadDropDownList><script> function onchange_ddlSelectionOM(sender, args) { var ddltext = sender.get_selectedItem().get_text(); if (ddltext == "Pie") { document.getElementById("<%=pieChart.ClientID %>").style.display = ""; $find("<%=pieChart.ClientID %>").repaint(); } }</script>Regards, Marin Bratanov
Telerik by Progress
Rank 1
Iron
Iron
Veteran
Marin,
It helped!
Thank you
David