How to update a WebChartControl according to the changes made to the ASPxGridView

Files to look at:

This example demonstrates how to update a WebChartControl based on the edited data in the ASPxGridView.
The datasource for both WebChartControl and ASPxGridView is XpoDataSource.
WebChartControl is updated via the ASPxClientWebChartControl.PerformCallback() method called from the ASPxClientGridView.EndCallback event handler.

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

WebSite/App_Code/Products.cs

C#
using System;
using DevExpress.Xpo;
namespace nwind {

    public class Products : XPLiteObject {
        int fCategoryID;
        public int CategoryID {
            get { return fCategoryID; }
            set { SetPropertyValue<int>("CategoryID", ref fCategoryID, value); }
        }
        bool fDiscontinued;
        public bool Discontinued {
            get { return fDiscontinued; }
            set { SetPropertyValue<bool>("Discontinued", ref fDiscontinued, value); }
        }
        string fEAN13;
        [Size(12)]
        public string EAN13 {
            get { return fEAN13; }
            set { SetPropertyValue<string>("EAN13", ref fEAN13, value); }
        }
        int fProductID;
        [Key(true)]
        public int ProductID {
            get { return fProductID; }
            set { SetPropertyValue<int>("ProductID", ref fProductID, value); }
        }
        string fProductName;
        [Size(40)]
        public string ProductName {
            get { return fProductName; }
            set { SetPropertyValue<string>("ProductName", ref fProductName, value); }
        }
        string fQuantityPerUnit;
        [Size(20)]
        public string QuantityPerUnit {
            get { return fQuantityPerUnit; }
            set { SetPropertyValue<string>("QuantityPerUnit", ref fQuantityPerUnit, value); }
        }
        short fReorderLevel;
        public short ReorderLevel {
            get { return fReorderLevel; }
            set { SetPropertyValue<short>("ReorderLevel", ref fReorderLevel, value); }
        }
        int fSupplierID;
        public int SupplierID {
            get { return fSupplierID; }
            set { SetPropertyValue<int>("SupplierID", ref fSupplierID, value); }
        }
        decimal fUnitPrice;
        public decimal UnitPrice {
            get { return fUnitPrice; }
            set { SetPropertyValue<decimal>("UnitPrice", ref fUnitPrice, value); }
        }
        short fUnitsInStock;
        public short UnitsInStock {
            get { return fUnitsInStock; }
            set { SetPropertyValue<short>("UnitsInStock", ref fUnitsInStock, value); }
        }
        short fUnitsOnOrder;
        public short UnitsOnOrder {
            get { return fUnitsOnOrder; }
            set { SetPropertyValue<short>("UnitsOnOrder", ref fUnitsOnOrder, value); }
        }
        public Products(Session session) : base(session) { }
        public Products() : base(Session.DefaultSession) { }
        public override void AfterConstruction() { base.AfterConstruction(); }
    }

}

WebSite/Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v23.1, Version=23.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dxwgv" %>
<%@ Register Assembly="DevExpress.Web.v23.1, Version=23.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dxe" %>

<%@ Register Assembly="DevExpress.XtraCharts.v23.1.Web, Version=23.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.XtraCharts.v23.1, Version=23.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %>

<%@ Register Assembly="DevExpress.Xpo.v23.1, Version=23.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Xpo" TagPrefix="dx" %>

<!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">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" ClientInstanceName="chart"
                Height="261px" Width="1016px" DataSourceID="XpoDataSource1"
                CrosshairEnabled="True">
                <SeriesSerializable>
                    <cc1:Series Name="Series 1"
                        ArgumentDataMember="ProductName" ValueDataMembersSerializable="UnitPrice">
                        <ViewSerializable>
                            <cc1:LineSeriesView></cc1:LineSeriesView>
                        </ViewSerializable>
                        <LabelSerializable>
                            <cc1:PointSeriesLabel LineVisibility="True">
                            </cc1:PointSeriesLabel>
                        </LabelSerializable>
                    </cc1:Series>
                </SeriesSerializable>
                <SeriesTemplate>
                    <LabelSerializable>
                        <cc1:SideBySideBarSeriesLabel LineVisibility="True">
                        </cc1:SideBySideBarSeriesLabel>
                    </LabelSerializable>
                    <ViewSerializable>
                        <cc1:SideBySideBarSeriesView>
                        </cc1:SideBySideBarSeriesView>
                    </ViewSerializable>
                </SeriesTemplate>
                <DiagramSerializable>
                    <cc1:XYDiagram>
                        <AxisX VisibleInPanesSerializable="-1">
                            <Label Angle="45"></Label>
                        </AxisX>
                        <AxisY VisibleInPanesSerializable="-1">
                        </AxisY>
                    </cc1:XYDiagram>
                </DiagramSerializable>
                <FillStyle>
                    <OptionsSerializable>
                        <cc1:SolidFillOptions/>
                    </OptionsSerializable>
                </FillStyle>
            </dxchartsui:WebChartControl>
            <dxwgv:ASPxGridView ID="ASPxGridView1" runat="server" Width="1015px" AutoGenerateColumns="False" DataSourceID="XpoDataSource1" KeyFieldName="ProductID">
                <Columns>
                    <dxwgv:GridViewCommandColumn VisibleIndex="2" ShowEditButton="True">
                    </dxwgv:GridViewCommandColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="CategoryID" VisibleIndex="3">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataCheckColumn FieldName="Discontinued" Visible="False">
                    </dxwgv:GridViewDataCheckColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="EAN13" Visible="False"
                        VisibleIndex="0">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True"
                        VisibleIndex="4">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="5">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="QuantityPerUnit" Visible="False"
                        VisibleIndex="1">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="ReorderLevel" VisibleIndex="6">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="SupplierID" VisibleIndex="7">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="8">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="UnitsInStock" VisibleIndex="9">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="UnitsOnOrder" VisibleIndex="10">
                    </dxwgv:GridViewDataTextColumn>
                </Columns>
                <SettingsPager PageSize="15">
                </SettingsPager>
                <ClientSideEvents BeginCallback="function(s, e) {
    callBackEvent = e.command;
}"
                    EndCallback="function(s, e) {
    if (callBackEvent == &quot;UPDATEEDIT&quot;)
        chart.PerformCallback(&quot;test&quot;);
}" />
            </dxwgv:ASPxGridView>

        </div>

        <dx:XpoDataSource ID="XpoDataSource1" runat="server" TypeName="nwind.Products">
        </dx:XpoDataSource>

    </form>
</body>
</html>

WebSite/Default.aspx.cs

C#
using System;
using System.Data;
using System.Configuration;
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 DevExpress.Xpo;

public partial class _Default : System.Web.UI.Page 
{
    protected Session session1;

    protected void Page_Init(object sender, EventArgs e) {
        session1 = new Session();
        XpoDataSource1.Session = session1;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        XpoDataSource1.Criteria = "[UnitPrice] < 10";
    }

}

WebSite/Global.asax

Code
<%@ Application Language="C#" %>

<script runat="server">

    void Application_Start(object sender, EventArgs e) 
    {
        // Code that runs on application startup


        // Code that runs on the application startup
        // Specify the connection string, which is used to open a database. 
        // It's supposed that you've already created the Comments database within the App_Data folder.
        string conn = DevExpress.Xpo.DB.AccessConnectionProvider.GetConnectionString(
          Server.MapPath("~\\App_Data\\nwind.mdb"));
        DevExpress.Xpo.Metadata.XPDictionary dict = new DevExpress.Xpo.Metadata.ReflectionDictionary();
        // Initialize the XPO dictionary.
        dict.GetDataStoreSchema(typeof(nwind.Products).Assembly);
        DevExpress.Xpo.DB.IDataStore store = DevExpress.Xpo.XpoDefault.GetConnectionProvider(conn,
                                                                          DevExpress.Xpo.DB.AutoCreateOption.SchemaAlreadyExists);
        DevExpress.Xpo.XpoDefault.DataLayer = new DevExpress.Xpo.ThreadSafeDataLayer(dict, store);
        DevExpress.Xpo.XpoDefault.Session = null;
    }
    
    void Application_End(object sender, EventArgs e) 
    {
        //  Code that runs on application shutdown

    }
        
    void Application_Error(object sender, EventArgs e) 
    { 
        // Code that runs when an unhandled error occurs

    }

    void Session_Start(object sender, EventArgs e) 
    {
        // Code that runs when a new session is started

    }

    void Session_End(object sender, EventArgs e) 
    {
        // Code that runs when a session ends. 
        // Note: The Session_End event is raised only when the sessionstate mode
        // is set to InProc in the Web.config file. If session mode is set to StateServer 
        // or SQLServer, the event is not raised.

    }
       
</script>

Alessandro (DevExpress Support)

last modified a year ago

Modified: December 14, 2023 11:59 AM

Platform: ASP.NET Web Forms

Product: XtraCharts Suite

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

How to update a WebChartControl according to the changes made to the ASPxGridView

Does this example address your development requirements/objectives?

Example Code

Recently viewed tickets