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

RadChart self-adjusting width and height

23 Answers 1270 Views

Chart (Obsolete)

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

23 Answers, 1 is accepted

answered on 18 Feb 2009, 04:23 PM

resizechartinsplitterserverside-webui.zip

Hello Mark,

One option is to set the size of the RadPane containing the chart in pixels. This way you know it and you can give the same size to the chart. However, in case the size of RadPane is in percents, you cannot know the pixels value before the page is loaded on the client. You can detect the initial load, retrieve the RadPane size and call AjaxRequest function in the very same manner as when the splitter is resized. I have attached an updated version of the page, which implements this approach.

Best regards,
Ves
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 20 Feb 2009, 07:21 AM

resizechartinsplitterserverside-webui2.zip

Hello Mark,

I am sorry for this mistake. The hidden field used to detect the initial load is updated on the server, so it should be present in the UpdatedControls collection of RadAjaxManager. I have attached the updated version of the page.

Greetings,
Ves
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 20 Feb 2009, 08:51 AM

Hi Ves,

That works great now, many thanks.
One other query i have now though..!

I have a drill down feature to another page on the series click, which i have working great. This now doesn't work as the chart is ajaxed.
I use this code...

Protected Sub chartPipeline_Click(ByVal sender As Object, ByVal args As Telerik.Charting.ChartClickEventArgs) Handles chartPipeline.Click

If args.SeriesItem IsNot Nothing Then

If args.SeriesItem.Parent.Name = "Quotation" Then

Response.Write(

"<SCRIPT>parent.location='../Dashboard/Sales/MyPipeline_Month.aspx?ID=False_" & args.SeriesItem.Name.ToString().Replace(Chr(10), "") & "_" & UserID & "'</SCRIPT>")

End If

End Sub

Is there any way i can still do this with the chart ajaxed ?

Also, every now and then i get the red X instead of the chart. This seems to be totally random when it occurs and happens on random charts. Is there any reason for this ?

Many thanks for your great support
Mark

answered on 13 Jul 2009, 01:01 AM

Hi Ves, and rest of team.

OK further to the above, I have run into further problems with resizing the chart - becasue i really want to do this on a page which has a master page (and hence a master AjaxManager and a Proxy on the actual page).

I have read Todd Anglin's blog about how "easy" it is to hook up the AjaxRequest handler via the proxy (though surely it woudl be even easier to give the proxy manager an attribute to set the event handler?). I have even figured out that when controls are on a child page (of a master) the client IDs change, but I am currently stuck getting the chart to actually re-display via Ajax.

I have tried setting the Ajax Settings both programatically and declaratively.

My code is as follows; would you be kind enough to suggest where I am going wrong, or perhpas just post a small demo which I can draw inspiration from.

This is the javascript in the Header Content part of my child page. Note that getting the reference to the HiddenField "isInitialLoad" has to change from your examples above, and likewise getting the client reference of the panel that has been resized (in my case the panel ID is RadPaneDisplay)

    
                    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> 
        
                        <script type="text/javascript"> 
        
                            function pageLoad(sender, args) { 
        
                                //var initialLoad = $get("isInitialLoad"); 
        
                                var initialLoad = $get('<%= isInitialLoad.ClientID %>'); 
        
                                if (initialLoad.value == "1") { 
        
                                    var resizedPane = $find('<%= RadPaneDisplay.ClientID %>'); 
        
                                    request_chart_resize(resizedPane); 
        
                                } 
        
                            } 
        
                            function ResizeChart_ServerSide(sender, args) { 
        
                                request_chart_resize(sender); 
        
                            } 
        
                            function request_chart_resize(sender) { 
        
                                var arg1 = sender.get_width() + "px"; 
        
                                var arg2 = sender.get_height() + "px"; 
        
                                var arguments = arg1 + "," + arg2; 
        
                                var ajaxManager = $find('<%= RadAjaxManager.GetCurrent(this).ClientID %>'); 
        
                                ajaxManager.ajaxRequest(arguments); 
        
                            } 
        
                        </script> 
        
                    </telerik:RadScriptBlock>

The following is the C# on the server side. You will note that I have commented out the 2 lines which try to set the AjaxSettings programatically so that I can try the declarative apporach, but either way does not seem to work.

    
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        //Get reference to AjaxManager (from Master)  
        
                        var manager = RadAjaxManager.GetCurrent(this); 
        
                        //Create a new delegate to handle the AjaxRequest event  
        
                        manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxManagerProxy_AjaxRequest); 
        
                        //Add your ajax settings programmatically (with ref to Master manager)  
        
                        //manager.AjaxSettings.AddAjaxSetting(manager, this.RadChart1); 
        
                        //manager.AjaxSettings.AddAjaxSetting(manager, this.isInitialLoad); 
        
                    } 
        
                    //Handle the Ajax event in your ContentPage code behind  
        
                    private void AjaxManagerProxy_AjaxRequest(object sender, AjaxRequestEventArgs e) 
        
                    { 
        
                        isInitialLoad.Value = "0"; 
        
                        string argument = (e.Argument); 
        
                        String[] stringArray = argument.Split(",".ToCharArray()); 
        
                        RadChart1.Width = new Unit(stringArray[0]); 
        
                        RadChart1.Height = new Unit(stringArray[1]); 
        
                    }

If I try to arrange the (Ajax) settings declaratively, I discover that to get any sort of Ajax effect I have to refer to the master Ajax Control ID (RadAjaxmaster1) and not the proxy; or I can uncomment the 2 lines above to arrange the settings programatically, but in both cases, I get the Ajax Loading panel displayed whilst the server processes, and then a blank display (no chart at all).

I hope it is clear (what I am doing), and I presume that I am just missing something.

Andrew

P.S. I am using the 2009 Q2 version of Web.UI

P.P.S. Further to this, it may well be relevant. I note that with Ajax settings in place, there is an additional "div" placed around the Chart, and this div does not have any size allocated. This suggests that the problem is similar to the overall issue of getting ajaxified grids and such things to size to 100% (high/wide).

On my master page, I have in palce the suggested fix from other threads, where a CSS Style is defined as follows:

    
                        #<%=PanelClientID%> {width: 100%; height: 100%; margin: 0px;}

Where the PanelClientID vaariable is setup in the code behind to get the ID of the Ajax Panel.

The problem seems to be that it is getting the ID of the panel which surrounds the HiddenField: The page source shows:

    
            #ctl00_ctl00_ContentPlaceHolderBody_isInitialLoadPanel {width: 100%; height: 100%; margin: 0px;}

So does this mean that we need a more sophisticated method of setting the size of all the Ajax Panels when there are a number of controls to be updated via Ajax and we want the 100% sizing effect too?

P.P.P.S.

Having dug into this even more, it appears that since the solution to re-sizing the chart, including a re-size on first load requires that there is a hidden field (isInitialLoad) to carry the state, and both this field and the chart control become the subject of the Ajax update, there are 2 separate panels created, and the one for the Hidden field (being the second item in my list of Ajax settings) is the one which propagates into the CSS.

Having moved the Hidden feild so that it is located after the chart on the page, I now get the re-sized chart, and then a large expanse of white space below presumably the panale with the hidden field in it.

answered on 15 Jul 2009, 10:35 AM

ajaxenabledwebsite2.zip

Hi Andrew,

We have attached a modified version of the sample application that supports Master/Content page scenario.

Hope this helps.

All the best,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 05 Nov 2010, 01:18 PM

default2.zip

Hello Garry,

Please, find attached an updated version, which does not throw exception in .net 4.

Best regards,
Ves
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 31 Jan 2011, 09:38 AM

Error.PNG

Hi,

I am using Defualt2.zip file.
But i am getting an null exception in the following line.

RadAjaxManager.GetCurrent(this).AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(RadAjaxManager1_AjaxRequest);

The code as follows.

Aspx file:

@ Page Language="C#" AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="Test2.Default" Title="Untitled Page" %>

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

function ResizeChart_ServerSide(sender, args) {

request(sender);

}

function request(sender) {

var ajaxManager = $find('<%= RadAjaxManager.GetCurrent(this).ClientID %>');

var arg1 = sender.get_width() + "px";

var arg2 = sender.get_height() + "px";

var arguments = arg1 + "," + arg2;

ajaxManager.ajaxRequest(arguments);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="Server">

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<telerik:AjaxUpdatedControl ControlID="RadChart1" />

<telerik:AjaxUpdatedControl ControlID="isInitialLoad" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<asp:HiddenField ID="isInitialLoad" Value="1" runat="server" />

<telerik:RadSplitter ID="RadSplitter2" runat="server">

<telerik:RadPane ID="RadPane1" runat="server" Width="10px" Scrolling="none">

</telerik:RadPane>

<telerik:RadSplitBar ID="Radsplitbar1" runat="server"></telerik:RadSplitBar>

<telerik:RadPane ID="RadPane2" runat="server" Height="800px" Width="600px">

<telerik:RadSplitter ID="Radsplitter4" runat="server" Height="100%" Width="100%"

Orientation="Horizontal">

<telerik:RadPane ID="Radpane3" runat="server" Height="100%" Width="100%" Scrolling="none"

OnClientResized="ResizeChart_ServerSide">

<telerik:RadChart ID="RadChart1" runat="server">

<telerik:ChartSeries>

<Items>

<telerik:ChartSeriesItem YValue="3">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="6">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="2">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="1">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="5">

</telerik:ChartSeriesItem>

<telerik:ChartSeriesItem YValue="4">

</telerik:ChartSeriesItem>

</Items>

</telerik:ChartSeries>

</Series>

</telerik:RadChart>

</telerik:RadPane>

<telerik:RadSplitBar ID="Radsplitbar4" runat="server"></telerik:RadSplitBar>

<telerik:RadPane ID="Radpane6" runat="server" Height="50px">

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

Aspx.cs file.
---------------

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

using

Telerik.Web.UI;

namespace

Test2

{

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

RadAjaxManager.GetCurrent(this).AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(RadAjaxManager1_AjaxRequest);

}

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

isInitialLoad.Value =

"0";

string argument = (e.Argument);

String[] stringArray = argument.Split(",".ToCharArray());

RadChart1.Width =

new Unit(stringArray[0]);

RadChart1.Height =

new Unit(stringArray[1]);

}

Webconfig file
--------------------

xml version="1.0"?>

<!--

Note: As an alternative to hand editing this file you can use the

web admin tool to configure settings for your application. Use

the Website->Asp.Net Configuration option in Visual Studio.

A full list of settings and comments can be found in

machine.config.comments usually located in

\Windows\Microsoft.Net\Framework\v2.x\Config

-->

configuration>

appSettings/>

connectionStrings/>

system.web>

<!--

Set compilation debug="true" to insert debugging

symbols into the compiled page. Because this

affects performance, set this value to true only

during development.

-->

compilation debug="true">

assemblies>

add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>

add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>

assemblies>

compilation>

<!--

The <authentication> section enables configuration

of the security authentication mode used by

ASP.NET to identify an incoming user.

-->

authentication mode="Windows"/>

<!--

The <customErrors> section enables configuration

of what to do if/when an unhandled error occurs

during the execution of a request. Specifically,

it enables developers to configure html error pages

to be displayed in place of a error stack trace.

</customErrors>

-->

system.web>

configuration>

Please have attached file as PNG file.
Please let me know if I have missed any thing.

Regards
mainak