I have an ASP.Net web page that contains a RadChart. When an area of the chart is clicked, it opens a popup window with a radgrid populated with data from a stored procedure that fires after one click but takes an extra click in order to populate this grid. I am kind of new to the Web page life cycle and I believe that is where my issue lies but I an having trouble figuring this one out. My C# code for the page is as follows:
using System;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Charting;
using Telerik.Web.UI;
using VapmData;
using VapmLib;
namespace CPSUI.CMS
{
public partial class ACPMSDashboard : System.Web.UI.Page
{
string EDI_TYPE;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
protected void EDITypeChart_Click(object sender, ChartClickEventArgs args)
{
string EDI_TYPE = args.SeriesItem.Name;
GetChartData(EDI_TYPE);
}
protected void EDITypeChart_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
{
//EDI_TYPE = e.SeriesItem.Name;
//EDI_TYPE = Convert.ToString(EDI_TYPE[EDI_TYPE.Length - 1]);
//EDITypeChart.Attributes["href"] = "#";
//EDITypeChart.Attributes["onClick"] = string.Format("return openEDIDetail('{0}');", EDI_TYPE);
}
public void GetChartData(string EDI_TYPE)
{
EDI_TYPE = Convert.ToString(EDI_TYPE[EDI_TYPE.Length - 1]);
EDITypeChart.Attributes["href"] = "#";
EDITypeChart.Attributes["onClick"] = string.Format("return openEDIDetail('{0}');", EDI_TYPE);
}
}
}
ASp.net:
<asp:Content ID="Content5" ContentPlaceHolderID="contentPH" runat="server">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="EDITypeChart">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="EDITypeChart" LoadingPanelID="LoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Refresh">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="EDITypeChart">
</telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="Refresh"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function openEDIDetail(EDI_TYPE) {
window.open("/CMS/EDIRadChartDetail.aspx?EDI_TYPE=" + EDI_TYPE + "&Index=0", "EDIRadChartDetail", "width=700px, height=400px, resizable=1, scrollbars=1");
}
</script>
</telerik:RadCodeBlock>
<div class="metrics-container">
<aspanel ID="Panel4" runat="server" BorderStyle="None" >
<telerik:RadChart ID="EDITypeChart" runat="server"
ChartImageFormat="Jpeg" Skin="Telerik"
onclick="EDITypeChart_Click" Width="246px" Height="242px" DataSourceID="SqlDataSource1"
DefaultType="Pie"
onitemdatabound="EDITypeChart_ItemDataBound">
<Appearance Corners="Round, Round, Round, Round, 7">
<FillStyle FillType="ComplexGradient">
<FillSettings GradientMode="Horizontal">
<ComplexGradient>
<telerik:GradientElement Color="236, 236, 236" />
<telerik:GradientElement Color="248, 248, 248" Position="0.5" />
<telerik:GradientElement Color="236, 236, 236" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<Border Color="130, 130, 130" />
</Appearance>
<Series>
<telerik:ChartSeries DataLabelsColumn="EDI_TYPE" DataYColumn="NUM_EDI_TYPE"
Name="NUM_EDI_TYPE" Type="Pie">
<Appearance>
<FillStyle FillType="ComplexGradient">
<FillSettings>
<ComplexGradient>
<telerik:GradientElement Color="213, 247, 255" />
<telerik:GradientElement Color="193, 239, 252" Position="0.5" />
<telerik:GradientElement Color="157, 217, 238" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<TextAppearance TextProperties-Color="51, 51, 51">
</TextAppearance>
</Appearance>
</telerik:ChartSeries>
</Series>
<Legend Visible="False">
<Appearance Visible="False" Dimensions-Margins="17.6%, 3%, 1px, 1px"
Position-AlignedPosition="TopRight"
Dimensions-Paddings="2px, 8px, 6px, 3px">
<ItemMarkerAppearance Figure="Square">
<Border Width="0" />
</ItemMarkerAppearance>
<FillStyle MainColor="">
</FillStyle>
<Border Width="0" />
</Appearance>
</Legend>
<PlotArea>
<DataTable>
<Appearance>
<Border Width="3" />
</Appearance>
</DataTable>
<XAxis AutoScale="False" DataLabelsColumn="EDI_TYPE" MaxValue="2" MinValue="1"
Step="1">
<Appearance Color="182, 182, 182" MajorTick-Color="216, 216, 216">
<MajorGridLines Color="216, 216, 216" PenStyle="Solid" />
<TextAppearance TextProperties-Color="51, 51, 51">
</TextAppearance>
</Appearance>
<AxisLabel>
<TextBlock Text="Y Axis">
<Appearance TextProperties-Color="51, 51, 51">
</Appearance>
</TextBlock>
</AxisLabel>
<Items>
<telerik:ChartAxisItem Value="1">
</telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="2">
</telerik:ChartAxisItem>
</Items>
</XAxis>
<YAxis>
<Appearance Color="182, 182, 182" MajorTick-Color="216, 216, 216"
MinorTick-Color="223, 223, 223">
<MajorGridLines Color="216, 216, 216" />
<MinorGridLines Color="223, 223, 223" />
<TextAppearance TextProperties-Color="51, 51, 51">
</TextAppearance>
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="51, 51, 51">
</Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<Appearance>
<FillStyle MainColor="White" FillType="Solid">
</FillStyle>
<Border Color="182, 182, 182" />
</Appearance>
</PlotArea>
<ChartTitle>
<Appearance>
<FillStyle MainColor="">
</FillStyle>
</Appearance>
<TextBlock Text="Inbound 837s">
<Appearance TextProperties-Color="72, 174, 40"
TextProperties-Font="Arial, 18pt">
</Appearance>
</TextBlock>
</ChartTitle>
</telerik:RadChart>
</aspanel>
</div>
<div class="metrics-container temp">
<aspanel ID="Panel1" runat="server" BorderStyle="None" Height="245px"
Width="250px">
</aspanel>
</div>
<div class="metrics-container temp">
<aspanel ID="Panel3" runat="server" BorderStyle="None" Height="245px"
Width="239px">
</aspanel>
</div>
<div class="metrics-container temp">
<aspanel ID="Panel2" runat="server" BorderStyle="None" Height="245px"
Width="239px">
</aspanel>
</div>
<table class="admintable" width="100%">
<tr>
<td class="style2">
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStringsBConnection %>"
SelectCommand="BKM_ChartTest" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</td>
</tr>
</table>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
</asp:Content>
Thanks in advance.
using System;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Charting;
using Telerik.Web.UI;
using VapmData;
using VapmLib;
namespace CPSUI.CMS
{
public partial class ACPMSDashboard : System.Web.UI.Page
{
string EDI_TYPE;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
protected void EDITypeChart_Click(object sender, ChartClickEventArgs args)
{
string EDI_TYPE = args.SeriesItem.Name;
GetChartData(EDI_TYPE);
}
protected void EDITypeChart_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
{
//EDI_TYPE = e.SeriesItem.Name;
//EDI_TYPE = Convert.ToString(EDI_TYPE[EDI_TYPE.Length - 1]);
//EDITypeChart.Attributes["href"] = "#";
//EDITypeChart.Attributes["onClick"] = string.Format("return openEDIDetail('{0}');", EDI_TYPE);
}
public void GetChartData(string EDI_TYPE)
{
EDI_TYPE = Convert.ToString(EDI_TYPE[EDI_TYPE.Length - 1]);
EDITypeChart.Attributes["href"] = "#";
EDITypeChart.Attributes["onClick"] = string.Format("return openEDIDetail('{0}');", EDI_TYPE);
}
}
}
ASp.net:
<asp:Content ID="Content5" ContentPlaceHolderID="contentPH" runat="server">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="EDITypeChart">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="EDITypeChart" LoadingPanelID="LoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Refresh">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="EDITypeChart">
</telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="Refresh"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function openEDIDetail(EDI_TYPE) {
window.open("/CMS/EDIRadChartDetail.aspx?EDI_TYPE=" + EDI_TYPE + "&Index=0", "EDIRadChartDetail", "width=700px, height=400px, resizable=1, scrollbars=1");
}
</script>
</telerik:RadCodeBlock>
<div class="metrics-container">
<aspanel ID="Panel4" runat="server" BorderStyle="None" >
<telerik:RadChart ID="EDITypeChart" runat="server"
ChartImageFormat="Jpeg" Skin="Telerik"
onclick="EDITypeChart_Click" Width="246px" Height="242px" DataSourceID="SqlDataSource1"
DefaultType="Pie"
onitemdatabound="EDITypeChart_ItemDataBound">
<Appearance Corners="Round, Round, Round, Round, 7">
<FillStyle FillType="ComplexGradient">
<FillSettings GradientMode="Horizontal">
<ComplexGradient>
<telerik:GradientElement Color="236, 236, 236" />
<telerik:GradientElement Color="248, 248, 248" Position="0.5" />
<telerik:GradientElement Color="236, 236, 236" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<Border Color="130, 130, 130" />
</Appearance>
<Series>
<telerik:ChartSeries DataLabelsColumn="EDI_TYPE" DataYColumn="NUM_EDI_TYPE"
Name="NUM_EDI_TYPE" Type="Pie">
<Appearance>
<FillStyle FillType="ComplexGradient">
<FillSettings>
<ComplexGradient>
<telerik:GradientElement Color="213, 247, 255" />
<telerik:GradientElement Color="193, 239, 252" Position="0.5" />
<telerik:GradientElement Color="157, 217, 238" Position="1" />
</ComplexGradient>
</FillSettings>
</FillStyle>
<TextAppearance TextProperties-Color="51, 51, 51">
</TextAppearance>
</Appearance>
</telerik:ChartSeries>
</Series>
<Legend Visible="False">
<Appearance Visible="False" Dimensions-Margins="17.6%, 3%, 1px, 1px"
Position-AlignedPosition="TopRight"
Dimensions-Paddings="2px, 8px, 6px, 3px">
<ItemMarkerAppearance Figure="Square">
<Border Width="0" />
</ItemMarkerAppearance>
<FillStyle MainColor="">
</FillStyle>
<Border Width="0" />
</Appearance>
</Legend>
<PlotArea>
<DataTable>
<Appearance>
<Border Width="3" />
</Appearance>
</DataTable>
<XAxis AutoScale="False" DataLabelsColumn="EDI_TYPE" MaxValue="2" MinValue="1"
Step="1">
<Appearance Color="182, 182, 182" MajorTick-Color="216, 216, 216">
<MajorGridLines Color="216, 216, 216" PenStyle="Solid" />
<TextAppearance TextProperties-Color="51, 51, 51">
</TextAppearance>
</Appearance>
<AxisLabel>
<TextBlock Text="Y Axis">
<Appearance TextProperties-Color="51, 51, 51">
</Appearance>
</TextBlock>
</AxisLabel>
<Items>
<telerik:ChartAxisItem Value="1">
</telerik:ChartAxisItem>
<telerik:ChartAxisItem Value="2">
</telerik:ChartAxisItem>
</Items>
</XAxis>
<YAxis>
<Appearance Color="182, 182, 182" MajorTick-Color="216, 216, 216"
MinorTick-Color="223, 223, 223">
<MajorGridLines Color="216, 216, 216" />
<MinorGridLines Color="223, 223, 223" />
<TextAppearance TextProperties-Color="51, 51, 51">
</TextAppearance>
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="51, 51, 51">
</Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<Appearance>
<FillStyle MainColor="White" FillType="Solid">
</FillStyle>
<Border Color="182, 182, 182" />
</Appearance>
</PlotArea>
<ChartTitle>
<Appearance>
<FillStyle MainColor="">
</FillStyle>
</Appearance>
<TextBlock Text="Inbound 837s">
<Appearance TextProperties-Color="72, 174, 40"
TextProperties-Font="Arial, 18pt">
</Appearance>
</TextBlock>
</ChartTitle>
</telerik:RadChart>
</aspanel>
</div>
<div class="metrics-container temp">
<aspanel ID="Panel1" runat="server" BorderStyle="None" Height="245px"
Width="250px">
</aspanel>
</div>
<div class="metrics-container temp">
<aspanel ID="Panel3" runat="server" BorderStyle="None" Height="245px"
Width="239px">
</aspanel>
</div>
<div class="metrics-container temp">
<aspanel ID="Panel2" runat="server" BorderStyle="None" Height="245px"
Width="239px">
</aspanel>
</div>
<table class="admintable" width="100%">
<tr>
<td class="style2">
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStringsBConnection %>"
SelectCommand="BKM_ChartTest" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>
</td>
</tr>
</table>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
</asp:Content>
Thanks in advance.