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

Chart sometimes vanishing

4 Answers 119 Views

Chart (HTML5)

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

4 Answers, 1 is accepted

answered on 08 Feb 2013, 02:15 PM

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.

answered on 11 Feb 2013, 04:04 PM

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>

</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.

answered on 13 Feb 2013, 09:55 AM

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>

</telerik:RadDockLayout>

<div class="clear" style="clear: both;">

</div>

Regards,
Marin Bratanov
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Chart sometimes vanishing

4 Answers, 1 is accepted