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

RadHtmlChart does not show itself is has style="display:none;"

2 Answers 184 Views

Chart (HTML5)

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

David asked on 13 Jul 2016, 03:20 PM

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

answered on 14 Jul 2016, 09:25 AM

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

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.