[CLOSED] Ext.Net.Chart redraw exception

[rbtceo]

Hi All,

There is a custom Cart:

using System;
using System.Collections.Generic;
using Ext.Net;

namespace MyProject.Controls
{

    /// <summary>
    /// A Wrapper of the Ext.Net Chart Control
    /// </summary>
    public class DataChart : Ext.Net.Chart
    {

        private Store               _store;
        private IEnumerable<object> _data;
        private ChartType           _chartType;


        protected override void OnInit(EventArgs e)
        {
            PrepareStoreAndChartType();

            base.OnInit(e);
        }


        /// <summary>
        /// The data to display on the chart. Set at initialisation to include the data within the markup.
        /// </summary>
        /// <remarks>
        /// Expects all objects to be of the same type. 
        /// </remarks>
        public IEnumerable<object> ChartData 
        {
            get { return _data; }
            set { this.SetData(value); } 
        }


        /// <summary>
        /// The name property with the label names
        /// </summary>
        public string LabelProperty { get; set; }


        /// <summary>
        /// The property with the value (Expects a numeric value)
        /// </summary>
        public string ValueProperty { get; set; }

        public ChartType ChartType
        {
            get { return _chartType; }
            set
            {
                _chartType = value;
                ConfigureChart(value);
            }
        }

        public void SetData(IEnumerable<object> data)
        {
            this._data = data;
            var listType = GetItemType(data);
            var model = ModelFromType(listType);

            if (this._store == null)
            {
                PrepareStoreAndChartType();
            }

            this._store.Model.Clear();
            this._store.Model.Add(model);

            this._store.DataSource = data;
            this._store.DataBind();

            //If this is from an ajax event, rebuild the meta data in case the object type has changed
            if (Ext.Net.X.IsAjaxRequest)
            {
                this._store.RebuildMeta();
                // Not sure if the chart can be reconfigured dynamically, 
                // Ext.net does't appear to render the actions down to the client
                this.ConfigureChart(this.ChartType);
            }
        }


        private void PrepareStoreAndChartType()
        {
            _store = this.GenerateStore();

            this.Store.Add(_store);

            ConfigureChart(this.ChartType);
        }

        private Type GetItemType(object someCollection)
        {
            var type = someCollection.GetType();
            var ienum = type.GetInterface(typeof(IEnumerable<>).Name);
            return ienum != null
              ? ienum.GetGenericArguments()[0]
              : null;
        }

       
        private static bool IsNumericType(Type t)
        {
            switch (Type.GetTypeCode(t))
            {
                case TypeCode.Byte:
                case TypeCode.SByte:
                case TypeCode.UInt16:
                case TypeCode.UInt32:
                case TypeCode.UInt64:
                case TypeCode.Int16:
                case TypeCode.Int32:
                case TypeCode.Int64:
                case TypeCode.Decimal:
                case TypeCode.Double:
                case TypeCode.Single:
                    return true;
                default:
                    return false;
            }
        }

        private Model ModelFromType(Type t)
        {
            var model = new Model();
            
            foreach (var prop in t.GetProperties())
            {
                var isNumeric = IsNumericType(prop.PropertyType);
                var field = new ModelField(prop.Name, isNumeric ? ModelFieldType.Int : ModelFieldType.Auto);
                model.Fields.Add(field);
            }

            return model;
        }

        private Store GenerateStore()
        {
            var store = new Store();

            store.ID = this.ID + "_store";

            return store;
        }

        private void ConfigureChart(ChartType chart)
        {
            
            switch (this.ChartType)
                {
                    case ChartType.BarChart:
                        this.ConfigureAsBarChart();
                        break;
                    case ChartType.PieChart:
                        this.ConfigureAsPieChart();
                        break;
                    default:
                        throw new ArgumentOutOfRangeException();
                }

            if (Ext.Net.X.IsAjaxRequest)
            {
                this.Redraw();
            }
            
        }

        private void ConfigureAsBarChart()
        {
            this.Series.Clear();
            this.Axes.Clear();
            
            var series = new BarSeries
            {
                ShowInLegend = true,
                XField = new string[] { this.LabelProperty },
                YField = new string[] { this.ValueProperty },
                Highlight = true
            };

            var label = new SeriesLabel()
            {
                Field = new string[] { this.ValueProperty },
                Display = SeriesLabelDisplay.InsideEnd,
                Contrast = true,
                TextAnchor = "middle"
            };

            series.Label = label;

            var valueAxis = new NumericAxis()
            {
                Position = Position.Bottom,
                Grid = true,
                Title = "Number",
                Label = new AxisLabel()
                {
                    Renderer =
                    {
                        Handler = "return Ext.util.Format.number(value, '0,0');"
                    }
                }
            };

            var labelAxis = new CategoryAxis()
            {
                Fields = new string[] { this.LabelProperty },
                Position = Position.Left,
            };

            this.Axes.Add(valueAxis);
            this.Axes.Add(labelAxis);
            this.Series.Add(series);

            
        }

        private void ConfigureAsPieChart()
        {
            this.Series.Clear();
            this.Axes.Clear();

            var series = new PieSeries
            {
                ShowInLegend = true,
                AngleField = this.ValueProperty,
                Highlight = true,
                Donut=0
            };

            var label = new SeriesLabel()
            {
                Field = new string[] { this.LabelProperty },
                Display = SeriesLabelDisplay.Rotate,
                Contrast = true
            };

            series.Label = label;
            this.Series.Add(series);
        }

    }
    
    public enum ChartType
    {
        BarChart,
        PieChart
    }
}

and a test page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="EnrolmentProjectManagement.test" %>
<%@ Register TagPrefix="a" Namespace="MyProject.Controls" Assembly="MyProject" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>test</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Panel runat="server" Layout="FitLayout" Width="600"
                Height="600">
                <Items>
                    <a:DataChart runat="server" ChartType="BarChart" ValueProperty="Value" LabelProperty="Name" ID="simpleChart"/>
                </Items>
            </ext:Panel>
            <ext:Panel ID="Panel1" 
                runat="server"
                Border="false">
                <Items>                  
                    <ext:Button runat="server" Text="test">
                        <DirectEvents>
                            <Click OnEvent="testClick"/>
                        </DirectEvents>
                    </ext:Button>
                </Items>
            </ext:Panel> 
    </div>
    </form>
</body>
</html>

page code file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using EnrolmentProjectManagement.Controls;
using Ext.Net;

namespace MyProject
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            simpleChart.ChartData = GetData();
        }

        protected void testClick(object sender, DirectEventArgs e)
        {
            simpleChart.ChartData = GetData2();
        }

        private List<ChartStoreDataStructure> GetData()
        {
            var test = new ChartStoreDataStructure()
            {
                Name = "test",
                Value = "10",
                Width = "50"
            };

            var test2 = new ChartStoreDataStructure()
            {
                Name = "test2",
                Value = "25",
                Width = "50"
            };

            var test3 = new ChartStoreDataStructure()
            {
                Name = "test3",
                Value = "36",
                Width = "50"
            };

            var returnList = new List<ChartStoreDataStructure>();
            returnList.Add(test);
            returnList.Add(test2);
            returnList.Add(test3);

            return returnList;
        }

        private List<ChartStoreDataStructure> GetData2()
        {
            var test = new ChartStoreDataStructure()
            {
                Name = "test",
                Value = "100",
                Width = "50"
            };

            var test2 = new ChartStoreDataStructure()
            {
                Name = "test2",
                Value = "25",
                Width = "50"
            };

            var test3 = new ChartStoreDataStructure()
            {
                Name = "test3",
                Value = "36",
                Width = "50"
            };

            var returnList = new List<ChartStoreDataStructure>();
            returnList.Add(test);
            returnList.Add(test2);
            returnList.Add(test3);

            return returnList;
        }
    }

    public class ChartStoreDataStructure
    {
        public string Name { get; set; }
        public string Value { get; set; }
        public string Width { get; set; }
    }
}

It gives me an exception when I click "test" button.
Sorry for a lot of code.

I guess that something is wrong with control or a way I render it, but I can't find what.

Thank you in advance.

[Daniil]

Hi @rbtceo,

At minimum, the setter of the ChartType property should not lead to a Redraw call. Otherwise, it is called too early in the control life cycle.

public ChartType ChartType
{
    get { return _chartType; }
    set
    {
        _chartType = value;
        ConfigureChart(value);
    }
}

You can try something like this:

set
{
    _chartType = value;
    ConfigureChart(value, false);
}

private void ConfigureChart(ChartType chart, bool allowRedraw = true)
{
    ...

    if (Ext.Net.X.IsAjaxRequest && allowRedraw)
    {
        this.Redraw();
    }
}

[rbtceo]

Daniil,

Thank you.

The thread can be closed.