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()); break; } } 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"; topDefChart.DataBind(); this.Page.Controls.Add(topDefChart); SetChartAppearance2(topDefChart); } 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()); RadContextMenu1.Targets.Add(target); x++; } } RadContextMenu1.Items.Clear(); RadMenuItem menu1 = new RadMenuItem("item1"); RadMenuItem menu2 = new RadMenuItem("item2"); RadContextMenu1.Items.Add(menu1); RadContextMenu1.Items.Add(menu2); // 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; }1 Answer, 1 is accepted
0
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:
In order to display which of the bars is clicked you can show the hidden field content in a label on ContextMenu ItemClick event:
I hope this helps.
Regards,
Petar Kirov
the Telerik team
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script type="text/javascript"> function contextClick(param) { document.getElementById("hf1").value = param; return false; } </script></head><body> <form id="form1" runat="server"> <asp:HiddenField runat="server" ID="hf1" /> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"> </asp:ScriptReference> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"> </asp:ScriptReference> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"> </asp:ScriptReference> </Scripts> </telerik:RadScriptManager> <div> <telerik:RadChart ID="RadChart1" runat="server" AutoLayout="True"> <Series> <telerik:ChartSeries Name="Series 1"> <Items> <telerik:ChartSeriesItem Name="Item 1" YValue="5"> <ActiveRegion Attributes="oncontextmenu=contextClick('item1');'' id='A' " /> </telerik:ChartSeriesItem> <telerik:ChartSeriesItem Name="Item 2" YValue="4"> <ActiveRegion Attributes="oncontextmenu=contextClick('item2');'' id='B' " /> </telerik:ChartSeriesItem> <telerik:ChartSeriesItem Name="Item 3" YValue="5"> <ActiveRegion Attributes="oncontextmenu=contextClick('item3');'' id='C' " /> </telerik:ChartSeriesItem> </Items> </telerik:ChartSeries> </Series> </telerik:RadChart> <telerik:RadContextMenu ID="ContextMenu1" runat="server"> <Targets> <telerik:ContextMenuElementTarget ElementID="A" /> <telerik:ContextMenuElementTarget ElementID="B" /> <telerik:ContextMenuElementTarget ElementID="C" /> </Targets> <Items> <telerik:RadMenuItem Text="A1" /> <telerik:RadMenuItem Text="A2" /> <telerik:RadMenuItem Text="A3" /> </Items> </telerik:RadContextMenu>
<asp:Label ID="Label1" runat="server"></asp:Label> </div> </form></body></html>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.
Regards,
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.