Ajax Panel and Radcharts

6 posts, 1 answers
  1. JD Plagianis
    JD Plagianis avatar
    16 posts
    Member since:
    Sep 2009

    Posted 01 Dec 2009 Link to this post

    When i place a RadGrid in an ajax panel, the RadGrid grays out and the spinny icon shows overtop the center of the RadGrid.  This is an excellent effect which i use often in my websites.

    On my current website, I have tried to do the same thing with a RadChart, with some unexpected behavior.  When I place the RadChart in an ajax panel, the RadChart does not gray out and the spinny icon shows up at the top of the RadChart, BEHIND the title.  Note the little blue semicircle in the attached picture for reference.

    How can i acheive the nice effect i get with the RadGrid when i use the RadChart?

    P.S.>
    I have the BackgroundPosition set to Center and the RadChart is WITHIN the ajax panel.
  2. JD Plagianis
    JD Plagianis avatar
    16 posts
    Member since:
    Sep 2009

    Posted 02 Dec 2009 Link to this post

    I figured out what is causing the problem, but i still need a solution!

    Take a look at the attached screenshot and you can see my Design View interface in VS2008.

    The little image icons are actually my RadCharts.  The spinning thingy that the loading panel sticks on top of the RadChart is appearing precisely in the center of where the little RadChart icon in Design View appears.  I tested this by placing a RadChart inside a table and adjusting the alignment to various edges of the table.  The spinny thingy shows up precisely where the tiny icon in Design View sits, instead of appearing in the center of what renders as a 400x600 radchart!

    Please help!
  3. Ves
    Admin
    Ves avatar
    2927 posts

    Posted 04 Dec 2009 Link to this post

    Hi JD Plagianis,

    Unless zoom/scroll is involved, RadChart is simply an image, so having two images overlapping this way seems really strange to me. Do you have zoom/scroll enabled in RadChart? Can you reproduce this if you replace RadChart with a regular image control? Finally, can you send us an example, which we can run and debug locally? Thanks.

    Greetings,
    Ves
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  4. JD Plagianis
    JD Plagianis avatar
    16 posts
    Member since:
    Sep 2009

    Posted 04 Dec 2009 Link to this post

    Below are two codeblocks.  One contains the aspx code that defines the page layout and the other contains the vb codebehind.  I stripped out all the unnecessary code from the vb file such that the only thing that will appear on the page is a slider and 4 blank charts layed out 2x2 using radpanes.  Upon sliding the slider, the ajax callback will occur and you will see where the little spinny loader image is placed (behind the radcharts' titles instead of over the centers of the charts).

    Please let me know what i can do to fix this issue.

     
    ASPX code:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="QnoteReportMain.aspx.vb" Inherits="QnoteReportMain" %> 
     
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Charting" tagprefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <script type="text/javascript">  
          
          function pageLoad() {  
          }  
          
        </script> 
        <style type="text/css">  
     
     
    .RadMenu_Vista  
    {  
        font: normal 12px/23px "Segoe UI", Arial, sans-serif;  
        color: #000;  
        text-decoration: none;  
    }  
     
    .RadMenu  
    {  
        white-space:nowrap;  
        float:left;  
        position:relative;  
    }  
     
    .RadMenu  
    {  
        white-space:nowrap;  
        float:left;  
        position:relative;  
    }  
     
    .RadMenu  
    {  
        white-space:nowrap;  
        float:left;  
        position:relative;  
    }  
     
    .RadMenu ul.rmRootGroup  
    {  
        display:block;  
    }  
     
    .RadMenu ul.rmRootGroup  
    {  
        display:block;  
    }  
     
    .RadMenu ul.rmRootGroup  
    {  
        display:block;  
    }  
     
    .RadMenu_Vista .rmRootGroup  
    {  
        border: 1px solid #b7bdcd;  
        background-repeat: repeat-x;  
        background-position: 0 -408px;  
        background-color: #e0e5f5;  
    }  
     
    .RadMenu_Vista .rmRootGroup  
    {  
        background-image: url('mvwres://Telerik.Web.UI, Version=2009.2.826.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Vista.Menu.rmSprite.png');  
        background-color: transparent;  
    }  
     
    .RadMenu .rmRootGroup  
    {  
        margin:0;  
        padding:0;  
        position:relative;  
        left:0;  
        display: inline-block;  
    }  
     
    .RadMenu .rmRootGroup  
    {  
        margin:0;  
        padding:0;  
        position:relative;  
        left:0;  
        display: inline-block;  
    }  
     
    .RadMenu .rmRootGroup  
    {  
        margin:0;  
        padding:0;  
        position:relative;  
        left:0;  
        display: inline-block;  
    }  
     
    .RadMenu .rmHorizontal .rmItem  
    {  
        clear:none;  
    }  
     
    .RadMenu .rmHorizontal .rmItem  
    {  
        clear:none;  
    }  
     
    .RadMenu .rmHorizontal .rmItem  
    {  
        clear:none;  
    }  
     
    .RadMenu_Vista .rmFirst  
    {  
        background-position: 0 -24px;  
    }  
     
    .RadMenu_Vista .rmFirst  
    {  
        background-image: url('mvwres://Telerik.Web.UI, Version=2009.2.826.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Vista.Menu.rmSprite.png');  
        background-color: transparent;  
    }  
     
    .RadMenu .rmItem  
    {  
        padding: 0;  
    }  
     
    .RadMenu .rmItem  
    {  
        float:left;  
        position:relative;  
        list-style-image: none;  
        list-style-position:outside;  
        list-style:none;      
    }  
     
    .RadMenu .rmItem  
    {  
        padding: 0;  
    }  
     
    .RadMenu .rmItem  
    {  
        float:left;  
        position:relative;  
        list-style-image: none;  
        list-style-position:outside;  
        list-style:none;      
    }  
     
    .RadMenu .rmItem  
    {  
        float:left;  
        position:relative;  
        list-style-image: none;  
        list-style-position:outside;  
        list-style:none;      
    }  
     
    .RadMenu .rmItem  
    {  
        padding: 0;  
    }  
     
    .RadMenu a.rmLink  
    {  
        cursor:default;  
        display:block;  
    }  
     
    .RadMenu_Vista .rmLink  
    {  
        background-position: 0 1050px;  
        background-repeat: no-repeat;  
    }  
     
    .RadMenu_Vista .rmLink  
    {  
        font: normal 12px/23px "Segoe UI", Arial, sans-serif;  
        color: #000;  
        text-decoration: none;  
    }  
     
    .RadMenu_Vista .rmLink  
    {  
        background-image: url('mvwres://Telerik.Web.UI, Version=2009.2.826.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Vista.Menu.rmSprite.png');  
        background-color: transparent;  
    }  
     
    .RadMenu .rmLink  
    {  
        padding: 0 0 0 12px;  
        outline: 0;  
        float: left;  
    }  
     
    .RadMenu .rmLink  
    {  
        width:auto;  
    }  
     
    .RadMenu .rmLink  
    {  
        padding: 0 0 0 12px;  
        outline: 0;  
        float: left;  
    }  
     
    .RadMenu .rmLink  
    {  
        width:auto;  
    }  
     
    .RadMenu .rmLink  
    {  
        width:auto;  
    }  
     
    .RadMenu .rmLink  
    {  
        padding: 0 0 0 12px;  
        outline: 0;  
        float: left;  
    }  
     
    .RadMenu .rmHorizontal .rmText  
    {  
        padding: 0 12px 1px 0;  
    }  
     
    .RadMenu .rmHorizontal .rmText  
    {  
        padding: 0 12px 1px 0;  
    }  
     
    .RadMenu .rmHorizontal .rmText  
    {  
        padding: 0 12px 1px 0;  
    }  
     
    .RadMenu_Vista .rmText  
    {  
        background-position: 0 1050px;  
        background-repeat: no-repeat;  
    }  
     
    .RadMenu_Vista .rmText  
    {  
        background-image: url('mvwres://Telerik.Web.UI, Version=2009.2.826.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Vista.Menu.rmSprite.png');  
        background-color: transparent;  
    }  
     
    .RadMenu .rmText  
    {  
        padding-bottom: 1px;  
        float: left;  
    }  
     
    .RadMenu .rmText  
    {  
        display:block;  
    }  
     
    .RadMenu .rmText  
    {  
        padding-bottom: 1px;  
        float: left;  
    }  
     
    .RadMenu .rmText  
    {  
        display:block;  
    }  
     
    .RadMenu .rmText  
    {  
        display:block;  
    }  
     
    .RadMenu .rmText  
    {  
        padding-bottom: 1px;  
        float: left;  
    }  
     
    .RadTabStrip  
    {  
        margin: 0;  
        padding: 0;  
    }  
     
    .RadTabStripTop_Vista .rtsLevel { background-color: transparent; }  
     
    .RadTabStrip .rtsLevel1  
    {  
        padding-top: 0;  
    }  
     
    .RadTabStrip .rtsLevel  
    {  
        clear: both;  
        overflow: hidden;  
        width: 100%;  
        position: relative;  
        padding-top: 1px;  
    }  
     
    .RadTabStrip .rtsUL  
    {  
        overflow: hidden;  
        float:left;  
        margin: 0; padding: 0;  
    }  
     
    .RadTabStrip_Vista .rtsLI  
    {  
        color: #000;  
        font: 12px/26px "Segoe UI", Arial, sans-serif;  
    }  
     
    .RadTabStrip .rtsLI  
    {  
        float: left;  
        display: inline;  
        zoom: 1;  
    }  
     
    .RadTabStrip .rtsLI  
    {  
        overflow: hidden;  
        list-style-type: none;  
        margin: 0; padding: 0;  
    }  
     
    .RadTabStripTop_Vista .rtsLevel .rtsLink { background-image: url('mvwres://Telerik.Web.UI, Version=2009.2.826.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Vista.TabStrip.TabStripStates.png'); }  
     
    .RadTabStripTop_Vista .rtsSelected { background-position: 0 -26px; }  
     
    .RadTabStripTop_Vista .rtsLink { background-position: 0 0; }  
    .RadTabStrip_Vista .rtsLink  
    {  
        color: #000;  
        font: 12px/26px "Segoe UI", Arial, sans-serif;  
    }  
     
    .RadTabStrip .rtsLink  
    {  
        text-align: center;  
    }  
     
    .RadTabStrip .rtsLink  
    {  
        display: block;  
        outline: none;  
        cursor: pointer;  
        text-decoration: none;  
        white-space: nowrap;  
        padding-left: 9px;  
    }  
     
    .RadTabStripTop_Vista .rtsSelected .rtsOut { background-position: 100% -26px; }  
     
    .RadTabStripTop_Vista .rtsLevel .rtsOut { background-image: url('mvwres://Telerik.Web.UI, Version=2009.2.826.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Vista.TabStrip.TabStripStates.png'); }  
     
    .RadTabStrip .rtsLevel .rtsOut { text-decoration: inherit; }  
     
    .RadTabStripTop_Vista .rtsOut { background-position: 100% 0; }  
     
    .RadTabStrip .rtsOut  
    {  
        display: block;  
        padding-right: 9px;  
    }  
     
    .RadTabStrip .rtsLevel .rtsIn { text-decoration: inherit; }  
     
    .RadTabStrip .rtsIn  
    {  
        display: block;  
        padding: 0 5px;  
    }  
     
    .RadTabStrip .rtsLevel1 .rtsTxt  
    {  
        padding: 0 5px;  
    }  
     
    .RadTabStrip .rtsLevel .rtsTxt { text-decoration: inherit; }  
     
    .RadTabStrip .rtsTxt { display: inline-block; }  
     
    .RadTabStrip .rtsTxt  
    {  
        display: inline-block;  
    }  
     
        .RadGrid_Web20  
    {  
        font:12px/16px "segoe ui",arial,sans-serif;  
    }  
     
    .RadGrid_Web20  
    {  
        border:1px solid #4e75b3;  
        background:#fff;  
        color:#000;  
    }  
     
    .RadGrid_Web20 .rgMasterTable  
    {  
        border-collapse:separate;  
    }  
     
    .RadGrid_Web20 .rgMasterTable  
    {  
        font:12px/16px "segoe ui",arial,sans-serif;  
    }  
     
    .RadGrid_Web20 .rgHeader  
    {  
        color:#fff;  
        text-decoration:none;  
    }  
     
    .RadGrid_Web20 .rgHeader  
    {  
        border:1px solid;  
        border-color:#fff #6e8ec2 #204582 #355a99;  
        border-top:0;  
        padding-top:4px;  
        padding-bottom:4px;  
        background:0 -2300px repeat-x #7fa5d7 url('mvwres://Telerik.Web.UI, Version=2009.2.826.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Web20.Grid.sprite.gif');  
        text-align:left;  
        font-weight:normal;  
    }  
     
    .RadGrid_Web20 .rgHeader  
    {  
        padding-left:7px;  
        padding-right:7px;  
    }  
     
    .RadGrid_Web20 .rgHeader  
    {  
        cursor:default;  
    }  
     
            .style1  
            {  
            }  
              
            .style3  
            {  
                font-family: Verdana;  
            }  
     
        .RadSlider  
    {  
        font:normal 10px "Segoe UI", Arial, Verdana;  
        color:black;  
    }  
     
    .RadSlider  
    {  
        width:22px;  
        height:22px;  
    }  
     
    .RadSlider .rslTrack  
    {  
        position:absolute;  
        top:0;  
        left:0;  
    }  
     
    .RadSlider .rslTrack  
    {  
        z-index:1;  
    }  
     
    .RadSlider .rslSelectedregion  
    {  
        position:absolute;  
        top:0;  
        left:0;  
    }  
     
    .RadSlider .rslDraghandle  
    {  
        position:absolute;  
        top:0;  
        left:0;  
    }  
     
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <telerik:RadScriptManager ID="ScriptManager" runat="server"   
                EnableTheming="True">  
            </telerik:RadScriptManager> 
        <div> 
            <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Web20">  
            </telerik:RadSkinManager> 
        </div> 
            <br /> 
            <telerik:RadMenu ID="RadMenu1" Runat="server" Skin="Web20">  
                <Items> 
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/QnoteReportMain.aspx"   
                        Text="Real Time Reports">  
                        <Items> 
                            <telerik:RadMenuItem runat="server" NavigateUrl="~/RCMainPage.aspx"   
                                Text="Repetitive Candidates">  
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" NavigateUrl="~/IdleReport.aspx"   
                                Text="Qnote Idle Time">  
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" Text="Scrap &amp; Rework Costs"   
                                NavigateUrl="~/ScrapReworkPage.aspx">  
                            </telerik:RadMenuItem> 
                        </Items> 
                    </telerik:RadMenuItem> 
                </Items> 
            </telerik:RadMenu> 
            <br /> 
            <table style="border-style: solid; border-width: 2px; padding: 1px 4px; width: 100%;"   
            align="center">  
                <tr> 
                    <td align="center">  
                        <asp:Image ID="Image1" runat="server" /> 
                    </td> 
                </tr> 
                <tr> 
                    <td align="center" class="style1">  
                        <asp:Label ID="Label6" runat="server" style="font-family: Verdana"></asp:Label> 
                        </td> 
                        </tr> 
                        <tr> 
                    <td align="center" class="style1">  
                        <telerik:RadSlider runat="server" ID="RadSlider1" 
                            MinimumValue="3" MaximumValue="18" SelectionStart="3" SelectionEnd="18" 
                            AutoPostBack="true" SmallChange="1" LargeChange="3" ItemType="tick" TrackPosition ="TopLeft" 
                            ShowDecreaseHandle="false" ShowIncreaseHandle="false" Skin="Web20"   
                            Value="12" TrackMouseWheel="False" Height="40px" /> 
                            </td> 
                </tr> 
            </table> 
            <br /> 
        <table align="center" style="width: 100%;">  
            <tr> 
                <td align="center">  
            <telerik:RadSplitter ID="RadSplitter1" Runat="server" LiveResize="True"   
                Width="100%" Height="803px" Skin="Vista">  
               <telerik:RadPane ID="RadPane1" Runat="server" Height="400px" Scrolling="None"   
                    Width="600px"><telerik:RadSplitter ID="RadSplitter3"   
                       Runat="server" Orientation="Horizontal" Width="600px"><telerik:RadPane ID="RadPane2" Runat="server" Height="400px" Width="600px"   
                           Scrolling="None"><telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="400px"   
                                   width="600px"><telerik:RadChart ID="RadChart1" runat="server" AutoLayout="True"   
                                       AutoTextWrap="True" Height="400px" Skin="Web20" style="height: 16px"   
                                       Width="600px"><Series><telerik:ChartSeries Name="Series 1"><Appearance><FillStyle FillType="ComplexGradient"><FillSettings><ComplexGradient><telerik:GradientElement Color="213, 247, 255" /><telerik:GradientElement Color="193, 239, 252" Position="0.5" /><telerik:GradientElement Color="157, 217, 238" Position="1" /></ComplexGradient></FillSettings></FillStyle><TextAppearance TextProperties-Color="103, 136, 190"></TextAppearance></Appearance></telerik:ChartSeries><telerik:ChartSeries Name="Series 2"><Appearance><FillStyle FillType="ComplexGradient"><FillSettings><ComplexGradient><telerik:GradientElement Color="218, 254, 122" /><telerik:GradientElement Color="198, 244, 80" Position="0.5" /><telerik:GradientElement Color="153, 205, 46" Position="1" /></ComplexGradient></FillSettings></FillStyle><TextAppearance TextProperties-Color="103, 136, 190"></TextAppearance><Border Color="111, 174, 12" /></Appearance></telerik:ChartSeries></Series><PlotArea><XAxis><Appearance Color="149, 184, 206" MajorTick-Color="149, 184, 206"><MajorGridLines Color="209, 221, 238" Width="0" /></Appearance></XAxis><YAxis LabelStep="2"><Appearance Color="149, 184, 206" MajorTick-Color="149, 184, 206"   
                                                   MinorTick-Color="149, 184, 206"><MajorGridLines Color="209, 221, 238" /><MinorGridLines Color="209, 221, 238" /></Appearance></YAxis><Appearance><FillStyle FillType="Solid" MainColor="249, 250, 251"></FillStyle><Border Color="149, 184, 206" /></Appearance></PlotArea><Appearance><Border Color="103, 136, 190" /></Appearance><ClientSettings   
                    EnableZoom="False" /> 
                <ChartTitle><Appearance><FillStyle MainColor=""></FillStyle></Appearance><TextBlock><Appearance TextProperties-Color="0, 0, 79"></Appearance></TextBlock></ChartTitle><Legend><Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px"   
                                               Dimensions-Paddings="2px, 8px, 6px, 3px" Position-AlignedPosition="TopRight"><Border Color="165, 190, 223" /></Appearance></Legend></telerik:RadChart></telerik:RadAjaxPanel></telerik:RadPane><telerik:RadPane ID="RadPane3" Runat="server" Height="400px" Width="600px"   
                           Scrolling="None"><telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" height="400px"   
                               width="600px"><telerik:RadChart ID="RadChart2" runat="server" AutoLayout="True"   
                                   Height="400px" Skin="Web20" style="height: 16px" Width="600px"><Series><telerik:ChartSeries Name="Series 1"><Appearance><FillStyle FillType="ComplexGradient"><FillSettings><ComplexGradient><telerik:GradientElement Color="213, 247, 255" /><telerik:GradientElement Color="193, 239, 252" Position="0.5" /><telerik:GradientElement Color="157, 217, 238" Position="1" /></ComplexGradient></FillSettings></FillStyle><TextAppearance TextProperties-Color="103, 136, 190"></TextAppearance></Appearance></telerik:ChartSeries><telerik:ChartSeries Name="Series 2"><Appearance><FillStyle FillType="ComplexGradient"><FillSettings><ComplexGradient><telerik:GradientElement Color="218, 254, 122" /><telerik:GradientElement Color="198, 244, 80" Position="0.5" /><telerik:GradientElement Color="153, 205, 46" Position="1" /></ComplexGradient></FillSettings></FillStyle><TextAppearance TextProperties-Color="103, 136, 190"></TextAppearance><Border Color="111, 174, 12" /></Appearance></telerik:ChartSeries></Series><PlotArea><EmptySeriesMessage><TextBlock Text="Coming Soon"></TextBlock></EmptySeriesMessage><XAxis><Appearance Color="149, 184, 206" MajorTick-Color="149, 184, 206"><MajorGridLines Color="209, 221, 238" Width="0" /></Appearance></XAxis><YAxis LabelStep="2"><Appearance Color="149, 184, 206" MajorTick-Color="149, 184, 206"   
                                               MinorTick-Color="149, 184, 206"><MajorGridLines Color="209, 221, 238" /><MinorGridLines Color="209, 221, 238" /></Appearance></YAxis><Appearance><FillStyle FillType="Solid" MainColor="249, 250, 251"></FillStyle><Border Color="149, 184, 206" /></Appearance></PlotArea><Appearance><Border Color="103, 136, 190" /></Appearance><ChartTitle><Appearance><FillStyle MainColor=""></FillStyle></Appearance><TextBlock><Appearance textproperties-color="0, 0, 79"></Appearance></TextBlock></ChartTitle><Legend><Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px"   
                                           Dimensions-Paddings="2px, 8px, 6px, 3px" Position-AlignedPosition="TopRight"><Border Color="165, 190, 223" /></Appearance></Legend></telerik:RadChart></telerik:RadAjaxPanel></telerik:RadPane></telerik:RadSplitter></telerik:RadPane> 
     
               <telerik:RadPane ID="RadPane4" Runat="server" Height="400px" Scrolling="None"   
                    Width="600px"><telerik:RadSplitter ID="RadSplitter2"   
                       Runat="server" Orientation="Horizontal" Width="600px"><telerik:RadPane   
                    ID="RadPane5" Runat="server" Height="400px" Width="600px"   
                           Scrolling="Y"><telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" height="400px"   
                                   width="600px"><telerik:RadChart ID="RadChart3" runat="server" Height="400px" Skin="Web20"   
                                   Width="600px" AutoLayout="True" style="height: 16px"><Series><telerik:ChartSeries Name="Series 1"><Appearance><FillStyle FillType="ComplexGradient"><FillSettings><ComplexGradient><telerik:GradientElement Color="213, 247, 255" /><telerik:GradientElement Color="193, 239, 252" Position="0.5" /><telerik:GradientElement Color="157, 217, 238" Position="1" /></ComplexGradient></FillSettings></FillStyle><TextAppearance TextProperties-Color="103, 136, 190"></TextAppearance></Appearance></telerik:ChartSeries><telerik:ChartSeries Name="Series 2"><Appearance><FillStyle FillType="ComplexGradient"><FillSettings><ComplexGradient><telerik:GradientElement Color="218, 254, 122" /><telerik:GradientElement Color="198, 244, 80" Position="0.5" /><telerik:GradientElement Color="153, 205, 46" Position="1" /></ComplexGradient></FillSettings></FillStyle><TextAppearance TextProperties-Color="103, 136, 190"></TextAppearance><Border Color="111, 174, 12" /></Appearance></telerik:ChartSeries></Series><PlotArea><XAxis><Appearance Color="149, 184, 206" MajorTick-Color="149, 184, 206"><MajorGridLines Color="209, 221, 238" Width="0" /></Appearance></XAxis><YAxis LabelStep="2"><Appearance Color="149, 184, 206" MajorTick-Color="149, 184, 206"   
                                               MinorTick-Color="149, 184, 206"><MajorGridLines Color="209, 221, 238" /><MinorGridLines Color="209, 221, 238" /></Appearance></YAxis><Appearance><FillStyle FillType="Solid" MainColor="249, 250, 251"></FillStyle><Border Color="149, 184, 206" /></Appearance></PlotArea><Appearance><Border Color="103, 136, 190" /></Appearance><ChartTitle><Appearance><FillStyle MainColor=""></FillStyle></Appearance><TextBlock><Appearance TextProperties-Color="0, 0, 79"></Appearance></TextBlock></ChartTitle><Legend><Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px"   
                                           Dimensions-Paddings="2px, 8px, 6px, 3px"   
                                           Position-AlignedPosition="TopRight" location="InsidePlotArea"><Border Color="165, 190, 223" /></Appearance></Legend></telerik:RadChart><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><table align="center" cellpadding="0" cellspacing="0" style="width:100%;"><tr><td height="398" style="border: 1px solid #466ABB" width="600"><br /><asp:Label ID="Label4" runat="server" Font-Names="Verdana" Font-Size="15pt"   
                                           ForeColor="#00004F" Text="Label" Visible="False"></asp:Label><br /><asp:Label ID="Label5" runat="server" Font-Names="Verdana" Font-Size="10pt"   
                                           ForeColor="#00004F" Text="Label" Visible="False"></asp:Label><br /><br /><br /><br /><telerik:RadGrid ID="RadGrid3" runat="server" Font-Bold="False"   
                                           Font-Italic="False" Font-Overline="False" Font-Strikeout="False"   
                                           Font-Underline="False" GridLines="None" Skin="Web20" Width="588px"   
                                    Visible="False"><AlternatingItemStyle Font-Bold="False" Font-Italic="False"   
                                               Font-Overline="False" Font-Size="X-Small" Font-Strikeout="False"   
                                               Font-Underline="False" HorizontalAlign="Center" VerticalAlign="Middle"   
                                               Wrap="True" /><ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"   
                                               Font-Size="X-Small" Font-Strikeout="False" Font-Underline="False"   
                                               HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" /><MasterTableView Font-Bold="False" Font-Italic="False" Font-Overline="False"   
                                               Font-Strikeout="False" Font-Underline="False"><ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"   
                                                   Font-Strikeout="False" Font-Underline="False" Wrap="True" /></MasterTableView><HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"   
                                               Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center"   
                                               Wrap="True" /><GroupHeaderItemStyle Font-Bold="False" Font-Italic="False"   
                                               Font-Overline="False" Font-Strikeout="False" Font-Underline="False"   
                                               Wrap="True" /></telerik:RadGrid><br /><br /></td></tr></table></telerik:RadAjaxPanel></telerik:RadPane><telerik:RadPane ID="RadPane6" Runat="server" Height="400px" Width="600px"   
                           Scrolling="None"><telerik:RadAjaxPanel ID="RadAjaxPanel4" runat="server" height="400px"   
                               width="600px"><telerik:RadChart ID="RadChart4" runat="server" AutoLayout="True"   
                                   Height="400px" Skin="Web20" style="height: 16px" Width="600px"><Series><telerik:ChartSeries Name="AvgAge"><Appearance><FillStyle FillType="ComplexGradient"><FillSettings><ComplexGradient><telerik:GradientElement Color="213, 247, 255" /><telerik:GradientElement Color="193, 239, 252" Position="0.5" /><telerik:GradientElement Color="157, 217, 238" Position="1" /></ComplexGradient></FillSettings></FillStyle><TextAppearance TextProperties-Color="103, 136, 190"></TextAppearance></Appearance></telerik:ChartSeries></Series><PlotArea><XAxis><Appearance Color="149, 184, 206" MajorTick-Color="149, 184, 206"><MajorGridLines Color="209, 221, 238" Width="0" /></Appearance></XAxis><YAxis LabelStep="2"><Appearance Color="149, 184, 206" MajorTick-Color="149, 184, 206"   
                                               MinorTick-Color="149, 184, 206"><MajorGridLines Color="209, 221, 238" /><MinorGridLines Color="209, 221, 238" /></Appearance></YAxis><Appearance><FillStyle FillType="Solid" MainColor="249, 250, 251"></FillStyle><Border Color="149, 184, 206" /></Appearance></PlotArea><Appearance><Border Color="103, 136, 190" /></Appearance><ChartTitle><Appearance><FillStyle MainColor=""></FillStyle></Appearance><TextBlock><Appearance TextProperties-Color="0, 0, 79"></Appearance></TextBlock></ChartTitle><Legend><Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px"   
                                           Dimensions-Paddings="2px, 8px, 6px, 3px" location="InsidePlotArea"   
                                           Position-AlignedPosition="TopRight"><Border Color="165, 190, 223" /></Appearance></Legend></telerik:RadChart></telerik:RadAjaxPanel></telerik:RadPane></telerik:RadSplitter></telerik:RadPane> 
           </telerik:RadSplitter> 
                </td> 
            </tr> 
        </table> 
            <br /> 
            <table style="border-style: solid; border-width: 2px; padding: 1px 4px; width: 100%;"   
            align="center">  
                <tr> 
                    <td align="center" class="style1">  
                        <telerik:RadAjaxPanel ID="RadAjaxPanel5" runat="server" height="100px"   
                            width="800px">  
                        <asp:Label ID="Label3" runat="server" style="font-family: Verdana"   
                            Font-Size="Small"></asp:Label> 
                        <br /> 
                        <asp:Label ID="Label9" runat="server" style="font-family: Verdana"   
                            Font-Size="Small"></asp:Label> 
                        <br /> 
                        <span class="style3">  
                        <br /> 
                        </telerik:RadAjaxPanel> 
                    </td> 
                </tr> 
            </table> 
            <br /> 
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"   
                Skin="Web20">  
            </telerik:RadAjaxLoadingPanel> 
            <br /> 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"   
                DefaultLoadingPanelID="RadAjaxLoadingPanel1">  
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="RadSlider1">  
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="RadChart1" /> 
                            <telerik:AjaxUpdatedControl ControlID="RadChart2" /> 
                            <telerik:AjaxUpdatedControl ControlID="RadChart3" /> 
                            <telerik:AjaxUpdatedControl ControlID="RadChart4" /> 
                            <telerik:AjaxUpdatedControl ControlID="Label9" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
            </telerik:RadAjaxManager> 
        <br /> 
        </form> 
    </body> 
    </html> 
     


    VB CodeBehind:
    Imports Telerik.Web.UI  
    Imports System.Data.SqlClient  
    Imports System.Data  
    Imports System  
    Imports System.Collections  
    Imports System.ComponentModel  
    Imports System.Data.OleDb  
    Imports System.Drawing  
    Imports System.Web  
    Imports System.Web.SessionState  
    Imports System.Web.UI  
    Imports System.Web.UI.WebControls  
    Imports System.Web.UI.HtmlControls  
    Imports System.Math  
     
    Imports Telerik.Charting  
    Imports Telerik.Charting.Styles  
     
    Partial Class QnoteReportMain  
        Inherits System.Web.UI.Page  
     
        Dim TimeFrame As String 
     
        Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load  
            If Not Page.IsPostBack Then 
                Me.Page.Title = "Example of unexpected spinny loader behavior" 
                Label6.Text = "Adjust Timeframe for Charts (3 to 18 Months)" 
                Label9.Text = "Site best viewed at screen resolutions above 1280x1024" 
                TimeFrame = (RadSlider1.Value * 31).ToString  
                Try 
            'Calling my function to populate the chart  
                Catch ex As Exception  
                    RadChart1.PlotArea.EmptySeriesMessage.TextBlock.Text = "Server is down!" 
                End Try 
                Try 
            'Calling my function to populate the chart  
                Catch ex As Exception  
                    RadChart2.PlotArea.EmptySeriesMessage.TextBlock.Text = "Server is down!" 
                End Try 
                Try 
            'Calling my function to populate the chart  
                Catch ex As Exception  
                    Label5.Text = "Server is down!" 
                End Try 
                Try 
            'Calling my function to populate the chart  
                Catch ex As Exception  
                    RadChart4.PlotArea.EmptySeriesMessage.TextBlock.Text = "Server is down!" 
                End Try 
            End If 
        End Sub 
     
        Protected Sub RadSlider1_ValueChanged(ByVal sender As ObjectByVal e As EventArgs) Handles RadSlider1.ValueChanged  
            TimeFrame = (RadSlider1.Value * 31).ToString  
            Try 
            'Calling my function to populate the chart  
            Catch ex As Exception  
                RadChart1.PlotArea.EmptySeriesMessage.TextBlock.Text = "Server is down!" 
            End Try 
            Try 
            'Calling my function to populate the chart  
            Catch ex As Exception  
                RadChart2.PlotArea.EmptySeriesMessage.TextBlock.Text = "Server is down!" 
            End Try 
            Try 
            'Calling my function to populate the chart  
            Catch ex As Exception  
                Label5.Text = "Server is down!" 
            End Try 
            Try 
            'Calling my function to populate the chart  
            Catch ex As Exception  
                RadChart4.PlotArea.EmptySeriesMessage.TextBlock.Text = "Server is down!" 
            End Try 
     
        End Sub 
     
    End Class 
  5. Answer
    Ves
    Admin
    Ves avatar
    2927 posts

    Posted 09 Dec 2009 Link to this post

    Hello JD Plagianis,

     The issue seems to be related to the Style="height: 16px" placed in all chart declarations. The RadAjaxLoadingPanel image is bound by this size, so it is cut (only shown in 16 pixels). Please, remove this style setting from RadChart markup.


    Sincerely,
    Ves
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. JD Plagianis
    JD Plagianis avatar
    16 posts
    Member since:
    Sep 2009

    Posted 09 Dec 2009 Link to this post

    That was the solution!  I never even thought to look for something like that.  I had set the height to 400, but it was getting overridden by this "style height = 16" property.
Back to Top