JD Plagianis
Top achievements
Rank 1
Rank 1
JD Plagianis
asked on 01 Dec 2009, 10:43 PM
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.
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.
5 Answers, 1 is accepted
0
JD Plagianis
Top achievements
Rank 1
Rank 1
answered on 03 Dec 2009, 01:54 AM
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!
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!
0
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.
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.
0
JD Plagianis
Top achievements
Rank 1
Rank 1
answered on 04 Dec 2009, 05:35 PM
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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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 & 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 Object, ByVal 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 Object, ByVal 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 |
0
Accepted
Hello JD Plagianis,
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.
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.
0
JD Plagianis
Top achievements
Rank 1
Rank 1
answered on 09 Dec 2009, 04:23 PM
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.