Updatepanel In Content Page

[metcy]

Hi All,

 

I'm trying to get a linked chart within an update panel to update asynchronously when a user clicks on a pie slice in a different chart. I've used the sample provided with the documentation, however when the charts are on a content page the entire page is refreshing rather than just the update panel containing the linked chart. Anyone have any ideas how this can be done?

 

I have noticed that the sample code provided doesn't use master pages so am wondering if this is because this isn't possible. In effect, this is what I would like to do:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample2.aspx.cs" Inherits="nextSample" MasterPageFile="~/Site.master" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
   <title>FusionCharts Examples - Using ASP.NET.AJAX UpdatePanel #2</title>
   <script language="javascript" type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
   <script language="javascript" type="text/javascript" src="FusionCharts/jquery.min.js"></script>
   <style type="text/css">
           <!--
           body {
               font-family: Arial, Helvetica, sans-serif;
               font-size: 12px;
           }
           .text{
               font-family: Arial, Helvetica, sans-serif;
               font-size: 12px;
           }
            -->
       </style>

       </asp:Content>
       <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
           <asp:ScriptManager ID="ScriptManager1" runat="server" >
               <scripts>
                   <asp:ScriptReference Path="JScript.js" />
               </Scripts>

           </asp:ScriptManager>
           <table style="border: 1px dotted #aaaaaa;" width="950px"
               cellpadding="5">
               <tr>
                    <td align="center" valign="middle" colspan="2">
                       <h2>FusionCharts Example - UpdatePanel #2</h2>
                       <h4>Using ASP.NET.AJAX</h4>
                       <h5>Please Click on a Factory on the Pie chart below to see details</h5>
                   </td>
               </tr>
               <tr>
                   <td valign="middle" style="width: 450px; height: 299px;
                       border-right: #cdcdcd 1px dotted; border-top: #cdcdcd 1px dotted;
                       border-left: #cdcdcd 1px dotted; border-bottom: #cdcdcd 1px solid;"
                       align="center">

                       <script language="javascript" type="text/javascript">
                           //Call Ajax PostBack Function
                           function updateChart(factoryId){
                            // Call drillDown C# function by Ajax
                            //we pass the name of the function ('drillDown') to call 
                            //and the parameter (i.e., factoryId) to be passed to it
                            //both separated by a delimiter(here we use $, you can use anything)
                            __doPostBack("Panel1","drillDown$" + factoryId);
                        }
                       </script>

                       <% //Show Pie Chart %>
                       <%showPieChart();%>
                   </td>
                   <td valign="middle" style="border: 1px dotted #cdcdcd;">
                       <asp:UpdatePanel ID="FusionChartsUP" runat="server">
                           <ContentTemplate>
                               <asp:Panel ID="Panel1" runat="server" Height="350px"
                                   Width="450px">
                               </asp:Panel>
                           </ContentTemplate>
                       </asp:UpdatePanel>
                       <asp:UpdateProgress ID="UpdateProgress2" runat="server"
                           DisplayAfter="1">
                           <ProgressTemplate>
                               <img src="Images/loading.gif" style="position: absolute;
                                   top: 297px; left: 660px; z-index: 5;" />
                           </ProgressTemplate>
                       </asp:UpdateProgress>
                   </td>
               </tr>
           </table>
           <span id="ClientEvents"></span>
           <h5><a href="~/Default.aspx">Sample 1 [Home]</a></h5>
       </asp:Content>

[Guest Angshu]

Hi,

 

Welcome to FusionCharts Forum!

 

We have come up with a work around where you can use renderChart to update an update panel.

 

Please find the attached sample.

 

Here we did the following changes:

 

1. Added reference to jquery.min.js

 

2. Modified script manager to load a js script reference (JSScript.js) which will handle AJAX Client events (and render chart)

 

3. Modfied cs file to render all charts (when postback) using RenderChart (instead of RenderChartHTML)

 

4. APP_Code has a FusionCharts.cs (the source of the FusionCharts.dll) with a modification which will dispose an earlier built chart of the same id. You can compile the cs to dll.

 

Now you will find that RenderChart would work in AJAX PostBack and hence JavaScript chart would also work fine after Update Panel is updated.

 

Please give us your feedback on this.

 

Please do not hesitate to contact us if you've any queries.

NewUpdatePanel_SampleASPNET4.zip

[metcy]

Hi Angshu,

 

Thanks for your reply. I have used your sample code, but this does not resolve the problem. I am trying to use the code you have provided in the Sample2.aspx page, but within a separate MasterPage. In this instance it appears to do a full postback rather than just performing an asynchronous postback to refresh the update panel. The code I attached in my original post shows the changes I have made to utilise the master page.

 

Thanks

 

 

 

Hi,

 

Welcome to FusionCharts Forum!

 

We have come up with a work around where you can use renderChart to update an update panel.

 

Please find the attached sample.

 

Here we did the following changes:

 

1. Added reference to jquery.min.js

 

2. Modified script manager to load a js script reference (JSScript.js) which will handle AJAX Client events (and render chart)

 

3. Modfied cs file to render all charts (when postback) using RenderChart (instead of RenderChartHTML)

 

4. APP_Code has a FusionCharts.cs (the source of the FusionCharts.dll) with a modification which will dispose an earlier built chart of the same id. You can compile the cs to dll.

 

Now you will find that RenderChart would work in AJAX PostBack and hence JavaScript chart would also work fine after Update Panel is updated.

 

Please give us your feedback on this.

 

Please do not hesitate to contact us if you've any queries.

[AndyButler]

Did you resolve this as i'm having the same issue?

[Guest Sumedh]

Did you resolve this as i'm having the same issue?

 

Hi,

 

We are looking into it.

 

We will update you on this very soon.

[mjoodhand]

Hi,

 

We are looking into it.

 

We will update you on this very soon.

 

Hi

Is there a solution to this? I can get the UpdatePanel to work fine in an aspx page but as soon as I put the code into a Masterpage and ContentPage it results in the page doing a full postback when the first chart is clicked and an AJAX update is attempted.

 

Yours hopefully

 

Martin Goodhand

[Guest Sumedh]

Hi,

 

Please refer this post: http://forum.fusioncharts.com/topic/12436-alternative-to-fusion-chart-render-method-responsewritefusionchartrender/page__p__49178__hl__update+panel__fromsearch__1#entry49178

[mjoodhand]

Hi,

 

Please refer this post: http://forum.fusionc...h__1#entry49178

 

 

I've tried to replicate this and the solution works if the charts are in just an ASPX page (without a masterpage) but when you use a masterpage and add the two charts into a content page based on the Masterpage the full page posts back and not just the updatePanel with the second chart.

 

 

Regards

 

 

Martin

[mjoodhand]

I've tried to replicate this and the solution works if the charts are in just an ASPX page (without a masterpage) but when you use a masterpage and add the two charts into a content page based on the Masterpage the full page posts back and not just the updatePanel with the second chart.

 

 

Regards

 

 

Martin

 

Further to this I have taken your code exactly as it stands and have added a blank masterpage and copied and pasted the code into the content page. Attached is the site with the new Default2.aspx which works with the masterpage. As you will see if you run the page when you click the graph the full page posts back and not just the bar chart.

AJAXChartUpdater.zip

[AndyButler]

Further to this I have taken your code exactly as it stands and have added a blank masterpage and copied and pasted the code into the content page. Attached is the site with the new Default2.aspx which works with the masterpage. As you will see if you run the page when you click the graph the full page posts back and not just the bar chart.

 

 

Have you done this ?

 

 

1. this below goes in the .aspx page

 

<script language="javascript" type="text/javascript">

 

 

//Call Ajax PostBack Function

 

 

function updateChartBreakDown(Id) {

 

 

// Call drillDown C# function by Ajax

 

 

//we pass the name of the function ('drillDown') to call

 

 

//and the parameter (i.e., factoryId) to be passed to it

 

 

//both separated by a delimiter(here we use $, you can use anything)

 

__doPostBack(

 

"<%= PnlLineTime.UniqueID%>", "drillDown$" + Id);

 

}

 

 

 

</script>

 

 

2. Add this to the top of the page make sure the js is there?

 

 

 

 

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

 

 

<Scripts>

 

 

<asp:ScriptReference Path="updatepanelhook.fusioncharts.js" />

 

 

</Scripts>

 

 

</asp:ScriptManagerProxy>

 

[mjoodhand]

Have you done this ?

 

 

1. this below goes in the .aspx page <script language="javascript" type="text/javascript">

 

//Call Ajax PostBack Function

 

function updateChartBreakDown(Id) {

 

// Call drillDown C# function by Ajax

 

//we pass the name of the function ('drillDown') to call

 

//and the parameter (i.e., factoryId) to be passed to it

 

//both separated by a delimiter(here we use $, you can use anything)

 

__doPostBack(

 

"<%= PnlLineTime.UniqueID%>", "drillDown{:content:}quot; + Id);

 

}

 

 

 

</script>

 

 

2. Add this to the top of the page make sure the js is there?

 

 

 

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

 

<Scripts>

 

<asp:ScriptReference Path="updatepanelhook.fusioncharts.js" />

 

</Scripts>

 

</asp:ScriptManagerProxy>

 

 

 

 

This is a much neater way than I found which was to use the full name of the Panel with all the containers it was contained within. ie. MainContent_ContentPage_DetailsPanel_TabContainer1_Tab1_Panel1 etc...

 

 

Thanks for you help. Everytime I click on the bar I enjoy the way the second chart now updates!

 

 

 

Cheers

 

 

 

Martin

[Guest Sumedh]

Thanks for sharing feedback with us.