Selected Data in RadChart with RadContextMenu

Thread is closed for posting
2 posts, 0 answers
  1. Jeheon
    Jeheon avatar
    1 posts
    Member since:
    Aug 2012

    Posted 06 May 2013 Link to this post

    My senario is thus.
      - If a user click a context menu item on one of bar chart, I show related information to user.

    I have done Adding RadContextMenu on RadChart, but How can I know which data is clicked?

    my code is below.

    protected void RadChart1_Click(object sender, ChartClickEventArgs e)
            string causeCode = e.Series.Name;
            string date = e.SeriesItem.Label.TextBlock.Text;
            int cellCnt = 0;
            DataTable qty = (Session["DATASET"] as DataSet).Tables[1];
            foreach (DataRow dr in qty.Rows)
                if (dr["Date"].ToString() == date)
                    cellCnt = Int32.Parse(dr["CellCnt"].ToString());
            sql.SetDBInfo(SqlHelpers.LINE.TIP_DB, SqlHelpers.DBMS_TYPE.SQLSERVER);
            sql.QueryStr = String.Format(
                                @"SELECT    TOP 20 S.Code, COUNT(S.SubPanelID) * 1.0 / {0} * 100 Value
                                    FROM        ReportDB.tft.DEFECTKPI_RAW_RP S
                                    WHERE   S.BDate BETWEEN '2013-04-01' AND '2013-04-30'
                                                --AND S.Line = 'T'
                                                AND LEFT(S.ProcessID, 7) IN (SELECT ProcessID FROM ReportDB.std.MODELINFO WHERE ProdType = 'TV')
                                                AND S.CauseCode IN ('FAIL')
                                    GROUP BY S.Code
                                    ORDER BY COUNT(S.SubPanelID) DESC", cellCnt.ToString());
            qty = sql.GetData();
            RadChart topDefChart = new RadChart();
            topDefChart.ChartTitle.TextBlock.Text = causeCode + " " + date;
            topDefChart.DataSource = qty;
            topDefChart.PlotArea.XAxis.DataLabelsColumn = "Code";
        private void SetChartAppearance2(RadChart _chart)
            // Chart Appearence
            _chart.Skin = "LightBrown";
            _chart.AutoLayout = true;
            _chart.AutoTextWrap = true;
            _chart.Width = 900;
            _chart.Height = 400;
            // Series
            foreach (ChartSeries series in _chart.Series)
                series.DefaultLabelValue = "#Y{F3}";
                series.Appearance.ShowLabels = true;
                int x = 0;
                foreach (var item in series.Items)
                    item.ActiveRegion.Attributes = String.Format("id='code{0}'", x.ToString());
                    ContextMenuElementTarget target = new ContextMenuElementTarget();
                    target = new ContextMenuElementTarget();
                    target.ElementID = string.Format("code{0}", x.ToString());
            RadMenuItem menu1 = new RadMenuItem("item1");
            RadMenuItem menu2 = new RadMenuItem("item2");
            // Legend
            _chart.Legend.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Top;
            _chart.Legend.Appearance.Overflow = Telerik.Charting.Styles.Overflow.Row;
            // Axis
            _chart.PlotArea.YAxis.AxisLabel.TextBlock.Text = "%";
            _chart.PlotArea.YAxis.AxisLabel.Visible = true;
  2. Petar Kirov
    Petar Kirov avatar
    425 posts

    Posted 09 May 2013 Link to this post

    Hi Jeheon,

    Unfortunately there isn't an out of the box way to show which bar item is clicked, however, you can achieve this by using a HiddenField. Here is a sample chart with a context menu:
    %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApp.Default" %>
    <%@ Register Assembly="Telerik.Web.UI"
        Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Web.UI"
        Namespace="Telerik.Charting" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
        <script type="text/javascript">
            function contextClick(param) {
                document.getElementById("hf1").value = param;
                return false;
      <form id="form1" runat="server">
      <asp:HiddenField runat="server" ID="hf1" />
      <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
      <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
              <asp:ScriptReference Assembly="Telerik.Web.UI"
              <asp:ScriptReference Assembly="Telerik.Web.UI"
              <asp:ScriptReference Assembly="Telerik.Web.UI"
      <telerik:RadChart ID="RadChart1" runat="server" AutoLayout="True">
        <telerik:ChartSeries Name="Series 1">
          <telerik:ChartSeriesItem Name="Item 1" YValue="5">
           Attributes="oncontextmenu=contextClick('item1');'' id='A' " />
          <telerik:ChartSeriesItem Name="Item 2" YValue="4">
           Attributes="oncontextmenu=contextClick('item2');'' id='B' " />
          <telerik:ChartSeriesItem Name="Item 3" YValue="5">
           Attributes="oncontextmenu=contextClick('item3');'' id='C' " />
     <telerik:RadContextMenu ID="ContextMenu1" runat="server">
        <telerik:ContextMenuElementTarget ElementID="A" />
        <telerik:ContextMenuElementTarget ElementID="B" />
        <telerik:ContextMenuElementTarget ElementID="C" />
        <telerik:RadMenuItem Text="A1" />
        <telerik:RadMenuItem Text="A2" />
        <telerik:RadMenuItem Text="A3" />
        <asp:Label ID="Label1" runat="server"></asp:Label>

    In order to display which of the bars is clicked you can show the hidden field content in a label on ContextMenu ItemClick event:
    this.ContextMenu1.ItemClick += new RadMenuEventHandler(ContextMenu1_ItemClick);
    void ContextMenu1_ItemClick(object sender, RadMenuEventArgs e)
        Label1.Text = hf1.Value;
    I hope this helps.
    Petar Kirov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. DevCraft R3 2016 release webinar banner
Back to Top