Updatepanel and ext:Chart

  1. #1

    Updatepanel and ext:Chart

    Hey everyone,

    I have an issue with the asp:updatepanel and ext chart object.
    if I update the chart object with the code below the chart dissapears I don't really get what I'm doing wrong as its pretty much the example code copied. Is there an issue with updatepanels and chart objects?
    tried to add a default asp control that gets added through code to see if that works, and that seems to work just fine.

    markup (yes there is a master page but its the default one microsoft puts in projects that you make with the default template):
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DisableViewState="False"></ext:ResourceManager>
        <asp:UpdatePanel runat="server" ID="update1">
            <ContentTemplate>
                <h2>
                    <asp:Label runat="server" ID="label1"></asp:Label> 
                </h2>
                <div>
                    <ext:Chart runat="server" ID="chart1" Animate="True" >
                        <LegendConfig Position="Right" />
                    </ext:Chart>
                </div>
                <div>
                    <asp:Button runat="server" ID="btn1" OnClick="Test" Text="Test"/>
                    <asp:DropDownList runat="server" ID="ddl" OnSelectedIndexChanged="Test" AutoPostBack="True">
                        <asp:ListItem Value="1">test1</asp:ListItem>
                        <asp:ListItem Value="2">test2</asp:ListItem>
                    </asp:DropDownList>  
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Content>
    backend code:

     protected void Page_Load(object sender, EventArgs e)
            {
                    update1.ContentTemplateContainer.Controls.Add(new Literal { ID = "Test", Text = "TEST" });
                    Store store = new Store();
                    store.ID = "store1";
                    chart1.Width = 500;
                    chart1.Height = 500;
    
                    var model = new Model();
                    model.ID = "model";
                    model.Fields.Add("periode");
                    model.Fields.Add("periode2");
                    model.Fields.Add("data");
                    model.Fields.Add("data2");
    
                    store.Model.Add(model);
    
                    store.Data = createDT();
                    store.DataBind();
    
                    var caxs = new CategoryAxis();
                    caxs.Fields = new[] { "periode" };
                    chart1.Axes.Add(caxs);
    
                    var naxs = new NumericAxis();
                    naxs.Fields = new[] { "data", "data2" };
    
                    chart1.Axes.Add(naxs);
    
                    var lineTips = new ChartTip { TrackMouse = true };
                    lineTips.Renderer.Handler = "this.setTitle('Gemiddelde:' + '<br />' + storeItem.get('data'));";
                    lineTips.Width = new Unit(120);
    
                    var serie = new LineSeries();
                    serie.SeriesID = "line1";
                    serie.YField = new[] { "data" };
                    serie.XField = new[] { "periode" };
                    serie.Axis = Position.Left;
                    serie.Tips = lineTips;
    
                    chart1.Series.Add(serie);
    
                    lineTips = new ChartTip { TrackMouse = true };
                    lineTips.Renderer.Handler = "this.setTitle('Gemiddelde:' + '<br />' + storeItem.get('data2'));";
                    lineTips.Width = new Unit(120);
    
                    serie = new LineSeries();
                    serie.SeriesID = "line2";
                    serie.YField = new[] { "data2" };
                    serie.XField = new[] { "periode2" };
                    serie.Axis = Position.Left;
                    serie.Tips = lineTips;
                    chart1.Series.Add(serie);
                    chart1.Store.Add(store);
                    chart1.DataBind();
                
            }
    
            /// <summary>
            /// The create dt.
            /// </summary>
            /// <returns>
            /// The System.Data.DataTable.
            /// </returns>
            private DataTable createDT()
            {
                var rand = new Random();
    
                var dt = new DataTable();
                dt.Columns.Add("periode");
                dt.Columns.Add("periode2");
                dt.Columns.Add("data", typeof(int));
                dt.Columns.Add("data2", typeof(int));
    
                var row = dt.NewRow();
                row["periode"] = "1-3-2012";
                row["data"] = rand.Next(0, 40);
                dt.Rows.Add(row);
    
                row = dt.NewRow();
                row["periode"] = "1-4-2012";
                row["periode2"] = "1-4-2012";
                row["data"] = rand.Next(0, 40); 
                row["data2"] = rand.Next(0, 40); 
                dt.Rows.Add(row);
    
                row = dt.NewRow();
                row["periode"] = "1-5-2012";
                row["periode2"] = "1-5-2012";
                row["data"] = rand.Next(0, 40);
                row["data2"] = rand.Next(0, 40);
    
                dt.Rows.Add(row);
    
                row = dt.NewRow();
                row["periode"] = "1-6-2012";
                row["periode2"] = "1-6-2012";
                row["data"] = rand.Next(0, 40);
                row["data2"] = rand.Next(0, 40);
    
                dt.Rows.Add(row);
    
                return dt;
            }
    
            protected void Test(object sender, EventArgs e)
            {
                label1.Text = ddl.SelectedValue;
                var store = this.chart1.GetStore();
                store.Data = createDT();
                store.DataBind();
            }
    Last edited by Frenks; Jul 25, 2012 at 10:07 AM.
  2. #2
    Hi Frenks,

    Unfortunately I don't think we're going to be able to provide much support here for the <asp:UpdatePanel>.

    Using the UpdatePanel is absolutely not required with Ext.NET Controls and we would highly recommend completely removing the UpdatePanel from your Page. The UpdatePanel is probably also not required to asyc/ajax update your non-Ext.NET Controls either. During any DirectEvent/DirectMethod, just call .Render() on any Control (Ext.NET or ASP.NET) and Ext.NET will handle the re-rendering of the Control.

    Basically, maybe the Chart works with the <asp:UpdatePanel>, and maybe it doesn't. Either way, you shouldn't be using the <asp:UpdatePanel>.

    Hope this helps.
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hey Geoffrey,

    Thank you for the reply I started to put some ext directmethods and directevents in our code to try and solve our problem like that.
    However I run into the following problem I try to update the chart (and the label for testing purposes)
    The label updates but the chart doesn't, I get a javascript error "Uncaught TypeError: Cannot read property 'proxy' of undefined" what am I missing?

    Markup (my resourcemanager is on the master page)
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="default2.aspx.cs" Inherits="Speeltuin.default2" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
                <h2>
                </h2>
                <div runat="server" id="chartdiv">
                </div>
             <ext:Button ID="Button1" runat="server" Text="Click Me" Icon="Lightning">
                <Listeners>
                    <Click Handler="App.direct.SetTimeStamp();" />
                </Listeners>
            </ext:Button>
            
            <br />
           <asp:Button runat="server" ID="button2" Text="Test"/>
           <asp:Label runat="server" ID="label1"></asp:Label> 
    </asp:Content>
    code behind:
          using System;
        using System.Data;
        using System.Web.UI;
        using System.Web.UI.WebControls;
    
        using Ext.Net;
    
        /// <summary>
        /// The default 2.
        /// </summary>
        public partial class default2 : Page
        {
            /// <summary>
            /// The page_ load.
            /// </summary>
            /// <param name="sender">
            /// The sender.
            /// </param>
            /// <param name="e">
            /// The e.
            /// </param>
            protected void Page_Load(object sender, EventArgs e)
            {
                var rm = (ResourceManager)this.Page.Master.FindControl("ResourceManager1");
                rm.CustomDirectEvents.Add(new DirectEvent("button2", HtmlEvent.Click, new ComponentDirectEvent.DirectEventHandler(UpdateTimeStamp)));
    
                if (!X.IsAjaxRequest)
                {
                  
                    CreateGraph();
                }
             
            }
    
            ///// <summary>
            ///// The create graph.
            ///// </summary>
            private void CreateGraph()
            {
                var chart1 = new Chart();
                chart1.ID = "chart1";
                chart1.IDMode = IDMode.Explicit;
                chart1.Width = 500;
                chart1.Height = 500;
                chart1.Animate = true;
    
                var store = new Store();
                store.ID = "store1";
                store.IDMode = IDMode.Explicit;
                store.AutoDataBind = true;
                chart1.Width = 500;
                chart1.Height = 500;
    
                var model = new Model();
                model.ID = "model";
                model.IDMode = IDMode.Explicit;
                model.Fields.Add("periode");
                model.Fields.Add("periode2");
                model.Fields.Add("data");
                model.Fields.Add("data2");
    
                store.Model.Add(model);
    
                store.Data = CreateDT();
                store.DataBind();
    
                var caxs = new CategoryAxis();
                caxs.Fields = new[] { "periode" };
                chart1.Axes.Add(caxs);
    
                var naxs = new NumericAxis();
                naxs.Fields = new[] { "data", "data2" };
    
                chart1.Axes.Add(naxs);
    
                var lineTips = new ChartTip { TrackMouse = true };
                lineTips.Renderer.Handler = "this.setTitle('Gemiddelde:' + '<br />' + storeItem.get('data'));";
                lineTips.Width = new Unit(120);
    
                var serie = new LineSeries();
                serie.SeriesID = "line1";
                serie.YField = new[] { "data" };
                serie.XField = new[] { "periode" };
                serie.Axis = Position.Left;
                serie.Tips = lineTips;
    
                chart1.Series.Add(serie);
    
                lineTips = new ChartTip { TrackMouse = true };
                lineTips.Renderer.Handler = "this.setTitle('Gemiddelde:' + '<br />' + storeItem.get('data2'));";
                lineTips.Width = new Unit(120);
    
                serie = new LineSeries();
                serie.SeriesID = "line2";
                serie.YField = new[] { "data2" };
                serie.XField = new[] { "periode2" };
                serie.Axis = Position.Left;
                serie.Tips = lineTips;
                chart1.Series.Add(serie);
                chart1.Store.Add(store);
                chart1.DataBind();
                chartdiv.Controls.Add(chart1);
            }
    
            /// <summary>
            /// The create dt.
            /// </summary>
            /// <returns>
            /// The System.Data.DataTable.
            /// </returns>
            private DataTable CreateDT()
            {
                var rand = new Random();
    
                var dt = new DataTable();
                dt.Columns.Add("periode");
                dt.Columns.Add("periode2");
                dt.Columns.Add("data", typeof(int));
                dt.Columns.Add("data2", typeof(int));
    
                var row = dt.NewRow();
                row["periode"] = "1-3-2012";
                row["data"] = rand.Next(0, 40);
                    row["data2"] = rand.Next(0, 40);
                dt.Rows.Add(row);
    
                row = dt.NewRow();
                row["periode"] = "1-4-2012";
                row["periode2"] = "1-4-2012";
                row["data"] = rand.Next(0, 40);
                row["data2"] = rand.Next(0, 40);
                dt.Rows.Add(row);
    
                row = dt.NewRow();
                row["periode"] = "1-5-2012";
                row["periode2"] = "1-5-2012";
                row["data"] = rand.Next(0, 40);
                row["data2"] = rand.Next(0, 40);
                dt.Rows.Add(row);
    
                row = dt.NewRow();
                row["periode"] = "1-6-2012";
                row["periode2"] = "1-6-2012";
                row["data"] = rand.Next(0, 40);
                row["data2"] = rand.Next(0, 40);
    
                dt.Rows.Add(row);
    
                return dt;
            }
    
            protected void UpdateTimeStamp(object sender, DirectEventArgs e)
            {
                this.label1.Text = DateTime.Now.ToLongTimeString();
                this.label1.Update();
                CreateGraph();
                var chart = (Ext.Net.Chart)Page.Master.FindControl("mainContent").FindControl("chart1");
                var store = chart.GetStore();
                store.Data = CreateDT();
                store.DataBind();
            }
    
            [DirectMethod]
            public void SetTimeStamp()
            {
                CreateGraph();
                var chart = (Ext.Net.Chart)Page.Master.FindControl("mainContent").FindControl("chart1");
                var store = chart.GetStore();
                store.Data = CreateDT();
                store.DataBind();
                this.label1.Text = DateTime.Now.ToLongTimeString();
                this.label1.Update();
            }
        }
  4. #4
    alright found the problem changed my createGraph()
    instead of chartdiv.control.add(chart1) I had to do chart1.AddTo(chartdiv);
    This forces the chart to render correctly with updated data!

          private void CreateGraph()
            {
                var chart1 = new Chart();
                chart1.ID = "chart1";
                chart1.IDMode = IDMode.Explicit;
                chart1.Width = 500;
                chart1.Height = 500;
                chart1.Animate = true;
    
                var store = new Store();
                store.ID = "store1";
                store.IDMode = IDMode.Explicit;
                store.AutoDataBind = true;
                chart1.Width = 500;
                chart1.Height = 500;
    
                var model = new Model();
                model.ID = "model";
                model.IDMode = IDMode.Explicit;
                model.Fields.Add("periode");
                model.Fields.Add("periode2");
                model.Fields.Add("data");
                model.Fields.Add("data2");
    
                store.Model.Add(model);
    
                store.Data = CreateDT();
                store.DataBind();
    
                var caxs = new CategoryAxis();
                caxs.Fields = new[] { "periode" };
                chart1.Axes.Add(caxs);
    
                var naxs = new NumericAxis();
                naxs.Fields = new[] { "data", "data2" };
    
                chart1.Axes.Add(naxs);
    
                var lineTips = new ChartTip { TrackMouse = true };
                lineTips.Renderer.Handler = "this.setTitle('Gemiddelde:' + '<br />' + storeItem.get('data'));";
                lineTips.Width = new Unit(120);
    
                var serie = new LineSeries();
                serie.SeriesID = "line1";
                serie.YField = new[] { "data" };
                serie.XField = new[] { "periode" };
                serie.Axis = Position.Left;
                serie.Tips = lineTips;
    
                chart1.Series.Add(serie);
    
                lineTips = new ChartTip { TrackMouse = true };
                lineTips.Renderer.Handler = "this.setTitle('Gemiddelde:' + '<br />' + storeItem.get('data2'));";
                lineTips.Width = new Unit(120);
    
                serie = new LineSeries();
                serie.SeriesID = "line2";
                serie.YField = new[] { "data2" };
                serie.XField = new[] { "periode2" };
                serie.Axis = Position.Left;
                serie.Tips = lineTips;
                chart1.Series.Add(serie);
                chart1.Store.Add(store);
                chart1.DataBind();
             
               
                chart1.AddTo(chartdiv);
            }

Similar Threads

  1. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  2. Replies: 1
    Last Post: Jun 02, 2012, 7:12 AM
  3. UpdatePanel
    By Timothy in forum Open Discussions
    Replies: 20
    Last Post: Feb 11, 2010, 10:23 AM
  4. UpdatePanel bug
    By SouthDeveloper in forum 1.x Help
    Replies: 1
    Last Post: Oct 23, 2009, 4:18 PM
  5. UpdatePanel
    By Timothy in forum Bugs
    Replies: 2
    Last Post: Mar 03, 2009, 8:48 AM

Posting Permissions