Chart sometimes vanishing

5 posts, 0 answers
  1. Rob
    Rob avatar
    27 posts
    Member since:
    Oct 2012

    Posted 06 Feb 2013 Link to this post

    I've got a problem with refers back to:  "Chart is Disappearing"  http://www.telerik.com/community/forums/aspnet-ajax/htmlchart/chart-is-disappearing.aspx

    I'm no longer utilizing an UpdatePanel for the ajax.  Instead, I'm utilizing the ajax manager on separate zones and radajaxpanels within the content templates of each dock.

    Oddly, the RadHTMLChart vanishes (and can not be found through javascript) when it moves to the other of two zones.  In the first zone it loads fine, but in the second it will not.  If moved back to the first, it loads properly again.

    Could this be a dom hierarchy issue?
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 08 Feb 2013 Link to this post

    Hello Rob,


    The problem with RadHtmlChart inside an update panel has been fixed, so my first advise is to double check the version your project is currently using. If it isn't the latest - try upgrading and see if this helps. You can either look in the project or in the rendered page - right after the opening tag of the first RadControl we render an HTML comment with the RadControls version.

    I also suggest you look for JavaScript errors on the page after the response. Any unrelated errors (e.g. due to the result of the postback, or some function that is executed throws an error, etc.) can break the chart because of its client-side rendering mechanism which uses only JavaScript.

    If neither upgrading, nor resoling any potential JS errors helps - could you post here the minimal markup that shows the problem so I can examine the case on my end?


    Kind regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rob
    Rob avatar
    27 posts
    Member since:
    Oct 2012

    Posted 08 Feb 2013 Link to this post

    I did our update a couple weeks ago to 2012.3.1308.40.  I verified it's right.  I was happy to remove the custom scripts and such we'd implemented.  I'm not seeing any script errors either.  It's odd, so I'll try to recreate the mark up for a test.  Thanks.
  5. Rob
    Rob avatar
    27 posts
    Member since:
    Oct 2012

    Posted 11 Feb 2013 Link to this post

    I've tried to minimize the markup as much as possible.  I've dumped some CSS rules being used for layout on here as well.

    <%@ Page Title="" Language="C#" MasterPageFile="~/TabbedPage.Master" AutoEventWireup="true"
        CodeBehind="DashboardAjaxTest.aspx.cs" Inherits="ADITime.Web.UI.Home.DashboardAjaxTest" %>
     
    <asp:Content ID="contentSupervisorHomeLinks" ContentPlaceHolderID="contentLinks"
        runat="server">
    </asp:Content>
    <asp:Content ID="contentSupervisorHomeInline" ContentPlaceHolderID="contentInlineCss" runat="server">
        <style type="text/css">
            div.dockZone
    {
        width: 335px;
        height: 100%;
        float: left;
    }
    #divLeftZone
    {
        width: 33%;
    }
    #divRightZone
    {
        width: 65%;
    }
    .radDockContainer {
        box-shadow:5px 5px 5px #b7b7b7;
        border-radius:5px;
        margin-bottom: 10px;
    }
     
    .rdTitleBar em
    {
        font-size: 16px !important;
        font-weight: bold !important;
        color: #384E73 !important;
    }
     
    .marginTopSpacer {
        margin-top: 10px;
    }
     
    a.titleLink {
        color: #384E73;
        font-weight: bold;
        text-decoration: none;
    }
    a.titleLink:hover{color: #05789a;}
     
    .comboBoxPeriodContainer {
        margin-top: 10px;
        margin-bottom: 10px;
    }
     
    .messageHighlight {
        margin-top: 10px;
        margin-bottom: 10px;
    }
     
    .listViewContainer
    {
        margin: 5px;
        padding: 5px 10px 5px 10px;
        border-radius: 6px;
        background-color: white;
        border: 1px solid #717073;   
        color: #384E73;
    }
     
    .leftTimeColumn {
        float: left;
        width: 80%;
    }
    .rightTimeColumn
    {
        float: left;
        width: 19%;
    }
     
    .rightAlignText {
        text-align: right;
    }
     
    .RadDockZone {
        padding-top: 0px !important;
    }
     
    .identifierImage {
        vertical-align: middle;
    }
     
    /* RadTabStrip overrides for floating docks */
    .RadTabStrip .rtsLevel {
        clear: none !important;
    }
    .RadTabStrip::after, .RadTabStripVertical::after, .RadTabStrip .rtsLevel::after, .RadTabStripVertical .rtsLevel::after,
     .RadTabStrip .rtsScroll::after, .RadTabStripVertical .rtsScroll::after, .RadTabStrip .rtsUL::after, .RadTabStripVertical .rtsUL::after,
     .RadTabStrip .rtsLI::after, .RadTabStripVertical .rtsLI::after
    {
        clear: none !important;
    }
        </style>   
    </asp:Content>
    <asp:Content ID="contentSupervisorHomeScript" ContentPlaceHolderID="contentScript"
        runat="server">
        <telerik:RadCodeBlock runat="server" ID="codeBlockSupervisorHome">
            <script type="text/javascript">
     
                function runOnResize() {
                    if (typeof window.onresize == 'function') {
                        var functionName = window.onresize;
                        //setTimeout(functionName, 0);
                    }
                }
            </script>
        </telerik:RadCodeBlock>
    </asp:Content>
    <asp:Content ID="contentSupervisorHomeMain" ContentPlaceHolderID="contentMain" runat="server">
        <telerik:RadAjaxManagerProxy ID="ajaxManagerSupervisorHome" runat="server" >
            <AjaxSettings>     
                <telerik:AjaxSetting AjaxControlID="dockZoneLeft">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="dockZoneLeft"  LoadingPanelID="loadingPanelSupervisorHome"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="dockZoneRight">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="dockZoneRight"  LoadingPanelID="loadingPanelSupervisorHome"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>    
        </telerik:RadAjaxManagerProxy
        <telerik:RadAjaxLoadingPanel ID="loadingPanelSupervisorHome" runat="server" InitialDelayTime="0000" MinDisplayTime="2000" />
            <telerik:RadDockLayout ID="dockLayoutSupervisorHome" runat="server" Visible="True"
                Skin="Office2010Silver"
                OnLoadDockLayout="DockLayoutSupervisorHome_LoadDockLayout"
                OnSaveDockLayout="DockLayoutSupervisorHome_SaveDockLayout"
                >
                <div id="divDashboardLayout">
                    <div id="divLeftZone" class="dockZone">
                        <telerik:RadDockZone ID="dockZoneLeft" runat="server" Orientation="Vertical" MinHeight="800px" MinWidth="250px" BorderStyle="None">
                            <telerik:RadDock ID="dockTimeCardExceptions" runat="server" Height="500px"
                                UniqueName="dockTimeCardExceptions"
                                AutoPostBack="True"
                                CommandsAutoPostBack="True"
                                EnableAnimation="true"
                                Resizable="true"
                                DefaultCommands="PinUnpin,ExpandCollapse,Close"
                                DockMode="Docked"
                                EnableRoundedCorners="true"
                                CssClass="radDockContainer"
                                DockHandle="TitleBar"
                                OnCommand="Dock_Command" >
                                <ContentTemplate>
                                    <telerik:RadAjaxPanel ID="RadAjaxPanel7" runat="server" LoadingPanelID="loadingPanelSupervisorHome" HorizontalAlign="Center" >     
                                            <div id="chartPlaceHolderException" class="chartPlaceholder" runat="server">
                                                <telerik:RadHtmlChart ID="pieChartExceptionSummary" runat="server" Width="350" Height="250" Transitions="true"             
                                                    Skin="WebBlue" >
                                                    <ChartTitle >
                                                        <Appearance Align="Center" BackgroundColor="White" Position="Top" Visible="false" />
                                                    </ChartTitle>              
                                                    <Legend>
                                                        <Appearance BackgroundColor="White" Position="Right" Visible="True"></Appearance>
                                                    </Legend>
                                                    <PlotArea >
                                                        <Series>
                                                            <telerik:PieSeries StartAngle="90" >
                                                                <LabelsAppearance Position="Circle" DataFormatString="{0}" Visible="True"></LabelsAppearance>
                                                                <TooltipsAppearance DataFormatString="{0}"></TooltipsAppearance>
                                                                <Items>
                                                                    <telerik:SeriesItem BackgroundColor="Red" Name="MP" YValue="1" />
                                                                </Items>
                                                            </telerik:PieSeries>
                                                        </Series>
                                                        <Appearance>
                                                            <FillStyle BackgroundColor="White" />
                                                        </Appearance>
                                                    </PlotArea>
                                                </telerik:RadHtmlChart>
                                            </div>
                                    </telerik:RadAjaxPanel>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </div>
                    <div id="divRightZone" class="dockZone">
                        <telerik:RadDockZone ID="dockZoneRight" runat="server" Orientation="Vertical" MinHeight="800px" MinWidth="250px" BorderStyle="None" >                                                          
                        </telerik:RadDockZone>
                    </div>
                </div>
            </telerik:RadDockLayout>
            <div class="clear"></div>
    </asp:Content>

    Basically, what I've narrowed it down to is the ajax on the rad zone.  Remove that and all is fine, but I don't want to trigger a post back or have that flash/blink when moving docks.  Yet, we want individual ajax on dock content to keep load down.

    Thanks for taking a look.  Let me know if you need anything more.

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 13 Feb 2013 Link to this post

    Hi Rob,

    Thank you for taking the time to send us a sample. I have just replied to your support ticket on the same subject and I am pasting my reply here for others that may have a similar issue:




    - what is most important is that when a dock is moved the initiator of the postback is the dock, not the zone, so this should be reflected in the AJAX setup
    - dock zones have their own Width property and it takes pixel values only.

    What I can suggest is using asp:UpdatePanels and setting the docks you have (I assume there are more than one) as their triggers as this would require the least amount of code:
    <telerik:RadDockLayout ID="dockLayoutSupervisorHome" runat="server" Visible="True">
        <div id="divDashboardLayout" style="width: 1200px;">
            <div id="divLeftZone" class="dockZone" style="width: 330px; float: left;">
                <asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                    <ContentTemplate>
                        <telerik:RadDockZone ID="dockZoneLeft" Width="330px" runat="server" Orientation="Vertical"
                            MinHeight="200px" MinWidth="250px" BorderStyle="None">
                            <telerik:RadDock ID="dockTimeCardExceptions" runat="server" Height="500px" UniqueName="dockTimeCardExceptions"
                                AutoPostBack="True" CommandsAutoPostBack="True" EnableAnimation="true" Resizable="true"
                                DefaultCommands="PinUnpin,ExpandCollapse,Close" DockMode="Docked" EnableRoundedCorners="true"
                                CssClass="radDockContainer" DockHandle="TitleBar">
                                <ContentTemplate>
                                    <asp:UpdatePanel ID="Updatepanel3" runat="server" UpdateMode="Conditional">
                                        <ContentTemplate>
                                            <div id="chartPlaceHolderException" class="chartPlaceholder" runat="server">
                                                <telerik:RadHtmlChart ID="pieChartExceptionSummary"
                                                    runat="server" Width="350" Height="250" Transitions="true" Skin="WebBlue">
                                                    <ChartTitle>
                                                        <Appearance Align="Center" BackgroundColor="White" Position="Top" Visible="false" />
                                                    </ChartTitle>
                                                    <Legend>
                                                        <Appearance BackgroundColor="White" Position="Right" Visible="True">
                                                        </Appearance>
                                                    </Legend>
                                                    <PlotArea>
                                                        <Series>
                                                            <telerik:PieSeries StartAngle="90">
                                                                <LabelsAppearance Position="Circle" DataFormatString="{0}" Visible="True">
                                                                </LabelsAppearance>
                                                                <TooltipsAppearance DataFormatString="{0}"></TooltipsAppearance>
                                                                <Items>
                                                                    <telerik:SeriesItem BackgroundColor="Red" Name="MP" YValue="1" />
                                                                </Items>
                                                            </telerik:PieSeries>
                                                        </Series>
                                                        <Appearance>
                                                            <FillStyle BackgroundColor="White" />
                                                        </Appearance>
                                                    </PlotArea>
                                                </telerik:RadHtmlChart>
                                            </div>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="dockTimeCardExceptions" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
            <div id="divRightZone" class="dockZone" style="width: 770px; float: left;">
                <asp:UpdatePanel ID="Updatepanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                    <ContentTemplate>
                        <telerik:RadDockZone ID="dockZoneRight" Width="770px" runat="server" Orientation="Vertical"
                            MinHeight="200px" MinWidth="250px" BorderStyle="None">
                        </telerik:RadDockZone>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="dockTimeCardExceptions" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
        </div>
    </telerik:RadDockLayout>
    <div class="clear" style="clear: both;">
    </div>



    Regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017