Unable to get the PopUp Dynamic Chart

  1. #1

    Unable to get the PopUp Dynamic Chart

    Hi,
    Here am unable to get the Dynamic Chart as PopUp, Help Me
    Here is my .aspx code, in this page i have enlarge button, with this button am calling ascx page but here am not getting the popup page.
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="~/EnlargeChart.ascx"  TagName="chart" TagPrefix="EL" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                PieSeries objPieSeries = new PieSeries()
                {
                    Donut = 0,
                    Highlight = true,
                    HighlightSegmentMargin = 20,
                    ShowInLegend = true
                };
    
                objPieSeries.AngleField = "Data1";
                objPieSeries.Label = new SeriesLabel() { Field = "Name" };
    
                TransactionChart.Series.Add(objPieSeries);
    
                var ds = new[] {
                    new { Name = "Apples",  Data1 = "45.0" },
                    new { Name = "Oranges", Data1 = "35.0" },
                    new { Name = "Pears",   Data1 = "20.0" }
                };
    
    
                Store1.DataSource = ds;
                Store1.DataBind();
    
                TransactionChart.Render();
            }
            protected void enlarge(object sender, DirectEventArgs e)
            {
                var config = new UserControlRendrerConfig
                {
                    UserControlPath = "~/EnlargeChart.ascx",
                    SingleControl = true,
                    Mode = RenderMode.RenderTo,
                    Element = this.Form.ClientID
                };
    
                config.BeforeRender += delegate(ComponentAddedEventArgs ce)
                {
                    ce.Control.ID = BaseControl.GenerateID();
                    e.ExtraParamsResponse.Add(new Ext.Net.Parameter("windowId", ce.Control.ConfigID));
                };
                UserControlRenderer.Render(config);
    
            }
        </script>
        <script type="text/javascript">
            function saveChart(btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Panel ID="Panel2" runat="server" Height="400" Width="400" Layout="FitLayout"
                MarginSpec="0 0 3 0">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Enlarge" Icon="ArrowRefresh" OnDirectClick="enlarge" />
                            <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Chart ID="TransactionChart" runat="server" Animate="true" Shadow="true" InsetPadding="60"
                        Theme="Base:gradients">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model2" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Position="Right" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
            <EL:chart runat="server" ID="el2" Visible="false" />
        </div>
        </form>
    </body>
    </html>
    Here is my popup .ascx page code,

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                PieSeries objPieSeries = new PieSeries()
                {
                    Donut = 0,
                    Highlight = true,
                    HighlightSegmentMargin = 20,
                    ShowInLegend = true
                };
    
                objPieSeries.AngleField = "Data1";
                objPieSeries.Label = new SeriesLabel() { Field = "Name" };
    
                TransactionChart.Series.Add(objPieSeries);
    
                var ds = new[] {
                    new { Name = "Apples",  Data1 = "45.0" },
                    new { Name = "Oranges", Data1 = "35.0" },
                    new { Name = "Pears",   Data1 = "20.0" }
                };
    
    
                Store1.DataSource = ds;
                Store1.DataBind();
    
                TransactionChart.Render();
            }
           
        </script>
        <script type="text/javascript">
            function saveChart(btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            }
        </script>
       
        <ext:Window ID="Window1" runat="server" Title="Details" Width="470" Height="380"
        Layout="FitLayout" Modal="true" CollapseDirection="Bottom">
        <Items>
        <ext:Panel ID="Panel2" runat="server" Height="400" Width="400" Layout="FitLayout"
                MarginSpec="0 0 3 0">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                          
                            <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Chart ID="TransactionChart" runat="server" Animate="true" Shadow="true" InsetPadding="60"
                        Theme="Base:gradients">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model2" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Position="Right" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </Items>
        </ext:Window>
    Thanks
  2. #2
    Hello!

    Try to remove TransactionChart.Render();

    protected void Page_Load(object sender, EventArgs e) {
    	PieSeries objPieSeries = new PieSeries() {
    		Donut = 0,
    		Highlight = true,
    		HighlightSegmentMargin = 20,
    		ShowInLegend = true
    	};
    
    	objPieSeries.AngleField = "Data1";
    	objPieSeries.Label = new SeriesLabel() { Field = new[] { "Name" } };
    
    	TransactionChart.Series.Add(objPieSeries);
    
    	var ds = new[] {
    			new { Name = "Apples",  Data1 = "45.0" },
    			new { Name = "Oranges", Data1 = "35.0" },
    			new { Name = "Pears",   Data1 = "20.0" }
    		};
    
    	Store1.DataSource = ds;
    	Store1.DataBind();
    }
  3. #3

    Hi @Baidaly

    Hi @Baidaly thanks for reply,
    i have removed that render() in pageload, its working fine, but some where in my projects am getting error see the below image
    help me why i am getting this error.
    Click image for larger version. 

Name:	Capture.jpg 
Views:	59 
Size:	96.4 KB 
ID:	5227

    Thank You.
  4. #4
    Mode = RenderMode.RenderTo,
    Element = this.Form.ClientID
    This happens because you are not rendering Partial View to an Ext.NET AbstractComponent.
  5. #5

    Hi @Baidaly

    Quote Originally Posted by Baidaly View Post
    This happens because you are not rendering Partial View to an Ext.NET AbstractComponent.
    Hi @Baidaly,
    Then how to render the Partial View to an Ext.NET AbstractComponent, help me..

    Thank You.
  6. #6
    Try this example, it's not perfect but can give you some main points:

    MainPage:
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="~/EnlargeChart.ascx"  TagName="chart" TagPrefix="EL" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                PieSeries objPieSeries = new PieSeries()
                    {
                        Donut = 0,
                        Highlight = true,
                        HighlightSegmentMargin = 20,
                        ShowInLegend = true
                    };
    
                objPieSeries.AngleField = "Data1";
                objPieSeries.Label = new SeriesLabel() {Field = new[] {"Name"}};
    
                TransactionChart.Series.Add(objPieSeries);
    
                var ds = new[]
                    {
                        new {Name = "Apples", Data1 = "45.0"},
                        new {Name = "Oranges", Data1 = "35.0"},
                        new {Name = "Pears", Data1 = "20.0"}
                    };
    
                Store1.DataSource = ds;
                Store1.DataBind();
    
                TransactionChart.Render();
            }
        }
        
        protected void enlarge(object sender, DirectEventArgs e)
        {
            Container chartContainer = new Container { ID = "ChartContainer" };
            chartContainer.ContentControls.Add((UserControl)this.LoadControl("~/EnlargeChart.ascx"));
            Panel2.Items.Add(chartContainer);
            chartContainer.Render(Panel2.ClientID, 0, RenderMode.AddTo);
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function saveChart(btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" ScriptMode="Debug" />
            <ext:Panel ID="Panel2" runat="server" Height="400" Width="400" Layout="FitLayout"
                MarginSpec="0 0 3 0">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Enlarge" Icon="ArrowRefresh" OnDirectClick="enlarge" />
                            <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Chart ID="TransactionChart" runat="server" Animate="true" Shadow="true" InsetPadding="60"
                        Theme="Base:gradients">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model2" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Position="Right" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
            <EL:chart runat="server" ID="el2" Visible="false" />
        </div>
        </form>
    </body>
    </html>
    UserControl:
    <%@ Control Language="C#" AutoEventWireup="true" ClientIDMode="Static" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
        
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                PieSeries objPieSeries = new PieSeries()
                {
                    Donut = 0,
                    Highlight = true,
                    HighlightSegmentMargin = 20,
                    ShowInLegend = true
                };
     
                objPieSeries.AngleField = "Data1";
                objPieSeries.Label = new SeriesLabel() { Field = new[] {"Name"} };
     
                TransactionChart.Series.Add(objPieSeries);
     
                var ds = new[] {
                    new { Name = "Apples",  Data1 = "45.0" },
                    new { Name = "Oranges", Data1 = "35.0" },
                    new { Name = "Pears",   Data1 = "20.0" }
                };
     
                Store1.DataSource = ds;
                Store1.DataBind();
            }
            
        </script>
    
        <script type="text/javascript">
            function saveChart(btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            }
        </script>
        
        <ext:Window ID="Window1" runat="server" Title="Details" Width="470" Height="380"
        Layout="FitLayout" Modal="true" CollapseDirection="Bottom">
        <Items>
        <ext:Panel ID="Panel2" runat="server" Height="400" Width="400" Layout="FitLayout"
                MarginSpec="0 0 3 0">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                           
                            <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Chart ID="TransactionChart" runat="server" Animate="true" Shadow="true" InsetPadding="60"
                        Theme="Base:gradients">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Position="Right" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Window>
  7. #7

    Hi @Baidaly

    Quote Originally Posted by Baidaly View Post
    Try this example, it's not perfect but can give you some main points:

    MainPage:
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="~/EnlargeChart.ascx"  TagName="chart" TagPrefix="EL" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                PieSeries objPieSeries = new PieSeries()
                    {
                        Donut = 0,
                        Highlight = true,
                        HighlightSegmentMargin = 20,
                        ShowInLegend = true
                    };
    
                objPieSeries.AngleField = "Data1";
                objPieSeries.Label = new SeriesLabel() {Field = new[] {"Name"}};
    
                TransactionChart.Series.Add(objPieSeries);
    
                var ds = new[]
                    {
                        new {Name = "Apples", Data1 = "45.0"},
                        new {Name = "Oranges", Data1 = "35.0"},
                        new {Name = "Pears", Data1 = "20.0"}
                    };
    
                Store1.DataSource = ds;
                Store1.DataBind();
    
                TransactionChart.Render();
            }
        }
        
        protected void enlarge(object sender, DirectEventArgs e)
        {
            Container chartContainer = new Container { ID = "ChartContainer" };
            chartContainer.ContentControls.Add((UserControl)this.LoadControl("~/EnlargeChart.ascx"));
            Panel2.Items.Add(chartContainer);
            chartContainer.Render(Panel2.ClientID, 0, RenderMode.AddTo);
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function saveChart(btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" ScriptMode="Debug" />
            <ext:Panel ID="Panel2" runat="server" Height="400" Width="400" Layout="FitLayout"
                MarginSpec="0 0 3 0">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Enlarge" Icon="ArrowRefresh" OnDirectClick="enlarge" />
                            <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Chart ID="TransactionChart" runat="server" Animate="true" Shadow="true" InsetPadding="60"
                        Theme="Base:gradients">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model2" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Position="Right" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
            <EL:chart runat="server" ID="el2" Visible="false" />
        </div>
        </form>
    </body>
    </html>
    UserControl:
    <%@ Control Language="C#" AutoEventWireup="true" ClientIDMode="Static" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
        
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                PieSeries objPieSeries = new PieSeries()
                {
                    Donut = 0,
                    Highlight = true,
                    HighlightSegmentMargin = 20,
                    ShowInLegend = true
                };
     
                objPieSeries.AngleField = "Data1";
                objPieSeries.Label = new SeriesLabel() { Field = new[] {"Name"} };
     
                TransactionChart.Series.Add(objPieSeries);
     
                var ds = new[] {
                    new { Name = "Apples",  Data1 = "45.0" },
                    new { Name = "Oranges", Data1 = "35.0" },
                    new { Name = "Pears",   Data1 = "20.0" }
                };
     
                Store1.DataSource = ds;
                Store1.DataBind();
            }
            
        </script>
    
        <script type="text/javascript">
            function saveChart(btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            }
        </script>
        
        <ext:Window ID="Window1" runat="server" Title="Details" Width="470" Height="380"
        Layout="FitLayout" Modal="true" CollapseDirection="Bottom">
        <Items>
        <ext:Panel ID="Panel2" runat="server" Height="400" Width="400" Layout="FitLayout"
                MarginSpec="0 0 3 0">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                           
                            <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Chart ID="TransactionChart" runat="server" Animate="true" Shadow="true" InsetPadding="60"
                        Theme="Base:gradients">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Position="Right" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Window>

    Hi Baidaly, thanks for giving more information
    its working good, but when i click on second time am not getting the popup window.

Similar Threads

  1. Unable to get Dynamic Charts in Ext.Net
    By nagesh in forum 2.x Help
    Replies: 13
    Last Post: Nov 17, 2012, 6:22 AM
  2. [CLOSED] Dynamic Chart and Store
    By pdcase in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Sep 24, 2012, 3:55 PM
  3. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  4. [CLOSED] Unable to close dynamic Window
    By wisdomchuck in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 28, 2012, 2:35 PM
  5. [CLOSED] File Upload filed is unable to find in popup window
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 09, 2011, 6:43 AM

Posting Permissions