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

3 posts, 0 answers
  1. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 13 Jul Link to this post

    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. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 14 Jul Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 14 Jul in reply to Marin Bratanov Link to this post

    Marin,

      It helped!

    Thank you

    David

Back to Top