Radchart click fires only after 2 clicks

[Brian]

I have an ASP.Net web page that contains a RadChart that is bound to a database with an sqldatasouce.  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);
}

}
}

ASPX Code:

<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">
<asp:Panel 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>
</asp:Panel>

[Danail Vasilev]

Hello Brian,

From the provided code snippet it seems that the client-side event onClick is attached when the chart is clicked. That is why on the first click the handler is just attached and on the second click it is triggered. What I can suggest is that you:

• Either

1. Attach the client-side click handler on page load.
2. In the server-side click handler - EDITypeChart_Click() store the args.SeriesItem.Name in a hidden field.
3. In the JavaScript function openEDIDetail() obtain the value of the hidden field and use it appropriately.

• OR directly execute JavaScript from the code behind in GetChartData() method. For example:

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);
    string script = "function f(){openEDIDetail(" + EDI_TYPE + "); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "key", script, true);
}

You may also find useful Opening from the Server help article that sheds more light on how to execute JavaScript from the code behind.

Regards,
Danail Vasilev
Telerik