Nov 29, 2012, 12:09 PM
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.
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