8 Answers, 1 is accepted
RadChart renders an image and an image map. One possible approach here would be to populate the seriesItem.ActiveRegion.Attributes property for each ChartSeriesItem, so that you can use it as a context menu target. Here is an example:
<
telerik:RadChart
ID
=
"RadChart1"
runat
=
"server"
AutoLayout
=
"True"
>
<
Series
>
<
telerik:ChartSeries
Name
=
"Series 1"
>
<
Items
>
<
telerik:ChartSeriesItem
Name
=
"Item 1"
YValue
=
"5"
>
<
ActiveRegion
Attributes
=
"id='A'"
/>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
Name
=
"Item 2"
YValue
=
"4"
>
<
ActiveRegion
Attributes
=
"id='A'"
/>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
Name
=
"Item 3"
YValue
=
"5"
>
<
ActiveRegion
Attributes
=
"id='A'"
/>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
Name
=
"Item 4"
YValue
=
"6"
>
<
ActiveRegion
Attributes
=
"id='A'"
/>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
Name
=
"Item 5"
YValue
=
"6"
>
<
ActiveRegion
Attributes
=
"id='A'"
/>
</
telerik:ChartSeriesItem
>
</
Items
>
</
telerik:ChartSeries
>
</
Series
>
</
telerik:RadChart
>
<
telerik:RadContextMenu
ID
=
"RCM1"
runat
=
"server"
EnableRoundedCorners
=
"true"
EnableShadows
=
"true"
>
<
Targets
>
<
telerik:ContextMenuElementTarget
ElementID
=
"A"
/>
</
Targets
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"A1"
/>
<
telerik:RadMenuItem
Text
=
"A2"
/>
<
telerik:RadMenuItem
Text
=
"A3"
/>
</
Items
>
</
telerik:RadContextMenu
>
You can wire the ItemDataBound event of RadChart to populate the Attributes property for a databound chart.
Kind regards,
Ves
the Telerik team
I have tried to implement the same behavior in a demo page and hosted on SharePoint 2010 site. But I can't see the content menu loaded once i right click on the series.
But if i run the same page using a ASP.NET Website it works. Any idea ?
Here is the complete Html from the page :
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2010.3.1109.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2010.3.1109.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" 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 id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadChart ID="RadChart1" runat="server" AutoLayout="True">
<Series>
<telerik:ChartSeries Name="Series 1">
<Items>
<telerik:ChartSeriesItem Name="Item 1" YValue="5">
<ActiveRegion Attributes="id='A'" />
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem Name="Item 2" YValue="4">
<ActiveRegion Attributes="id='A'" />
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem Name="Item 3" YValue="5">
<ActiveRegion Attributes="id='A'" />
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem Name="Item 4" YValue="6">
<ActiveRegion Attributes="id='A'" />
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem Name="Item 5" YValue="6">
<ActiveRegion Attributes="id='A'" />
</telerik:ChartSeriesItem>
</Items>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Series2">
<Items>
<telerik:ChartSeriesItem Name="Item 1" YValue="15">
<ActiveRegion Attributes="id='B'" />
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem Name="Item 2" YValue="43">
<ActiveRegion Attributes="id='B'" />
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem Name="Item 3" YValue="5">
<ActiveRegion Attributes="id='B'" />
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem Name="Item 4" YValue="16">
<ActiveRegion Attributes="id='B'" />
</telerik:ChartSeriesItem>
<telerik:ChartSeriesItem Name="Item 5" YValue="-6">
<ActiveRegion Attributes="id=B" />
</telerik:ChartSeriesItem>
</Items>
</telerik:ChartSeries>
</Series>
</telerik:RadChart>
<telerik:RadContextMenu ID="RadContextMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true">
<Targets>
<telerik:ContextMenuElementTarget ElementID="A" />
</Targets>
<Items>
<telerik:RadMenuItem Text="A1" />
<telerik:RadMenuItem Text="A2" />
<telerik:RadMenuItem Text="A3" />
</Items>
</telerik:RadContextMenu>
<telerik:RadContextMenu ID="RadContextMenu2" runat="server" EnableRoundedCorners="true" EnableShadows="true">
<Targets>
<telerik:ContextMenuElementTarget ElementID="B" />
</Targets>
<Items>
<telerik:RadMenuItem Text="B1" />
<telerik:RadMenuItem Text="B3" />
</Items>
</telerik:RadContextMenu>
</div>
</form>
</body>
</html>
Any suggestions ?
Thanks,
Nutan
Hello Nutan,
I just tried this code a couple of days ago (not in SharePoint, just in regular web) and could not get it to work immediately either. The problem is that you can’t have multiple web controls with the same ID within an HTML page (which is why Ves said to wire it up in the ItemDatabound event so you could create unique id’s for each series). Here is the code I added to the RadChart1_ItemDatabound Event in order to get it working with my live data that i am binding from the database.
Protected
Sub
RadChart1_ItemDataBound(
ByVal
sender
As
Object
,
ByVal
e
As
Telerik.Charting.ChartItemDataBoundEventArgs)
Handles
RadChart1.ItemDataBound
'Create a unique id for each series by using the SeriesItem Index
Dim
UniqueID
As
String
=
"menuTarget_"
& e.SeriesItem.Index.ToString
'Add the Unique id to the id field of the Active Region attributes
e.SeriesItem.ActiveRegion.Attributes =
"id='"
& UniqueID &
"' "
'Then add that ID as a target elememt ID of the context menu
Dim
menuTarget
As
New
ContextMenuElementTarget
menuTarget.ElementID = UniqueID
RCM1.Targets.Add(menuTarget)
End
Sub
If you want to test it using just the markup code from Ves’s example, just change the ActiveRegion Attributes for each ChartSeriesItem to make them unique (A,B,C,D,E) like this
<
telerik:ChartSeries
Name
=
"Series 1"
>
<
Items
>
<
telerik:ChartSeriesItem
Name
=
"Item 1"
YValue
=
"5"
>
<
ActiveRegion
Attributes
=
"id='A'"
/>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
Name
=
"Item 2"
YValue
=
"4"
>
<
ActiveRegion
Attributes
=
"id='B'"
/>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
Name
=
"Item 3"
YValue
=
"5"
>
<
ActiveRegion
Attributes
=
"id='C'"
/>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
Name
=
"Item 4"
YValue
=
"6"
>
<
ActiveRegion
Attributes
=
"id='D'"
/>
</
telerik:ChartSeriesItem
>
<
telerik:ChartSeriesItem
Name
=
"Item 5"
YValue
=
"6"
>
<
ActiveRegion
Attributes
=
"id='E'"
/>
</
telerik:ChartSeriesItem
>
</
Items
>
</
telerik:ChartSeries
>
Then add additional ContextMenuElementTarget to the Targets of the ContextMenu
<
Targets
>
<
telerik:ContextMenuElementTarget
ElementID
=
"A"
/>
<
telerik:ContextMenuElementTarget
ElementID
=
"B"
/>
<
telerik:ContextMenuElementTarget
ElementID
=
"C"
/>
<
telerik:ContextMenuElementTarget
ElementID
=
"D"
/>
<
telerik:ContextMenuElementTarget
ElementID
=
"E"
/>
</
Targets
>
Now that you have unique ID for each Area of the Image Map, the context menu will work on all Series Items.
As for the SharePoint Issue, can you please post your findings when you figure it out becuase my next step is to move mine into SharePoint 2010 as well.
Thanks
Bart
Thanks for your reply. The code really works great.
I am able to run the sample in SharePoint 2010. The issue identified was with IE version. For IE 8.0 compatibility mode does not show the Menu on right click. But if the browser is running in normal mode, context menu loads fine.
Now i identified another issue which am not sure is a known behavior from Telerik.
I have two different context menus for two different series. I want to display the context menu based on what series user right clicks on :
Series 1 - RadContextMenu1
Series 2 - RadContextMenu2
This works fine if the series are not overlapping with each other. But if there is a overloap, only the context menu of dataitem with value higher than of selected series item is displayed.
For eg, If I right click on a series item for Series 2, and it also has a overlapped section of a dataitem from Series 1, i can see the RadContextMenu1 Items and not RadContextMenu2 items.
Is there any solution to fix this ? need this really urgent.
Thanks,
Nutan
Did anyone had a problem with loading Content Menu with Chart Series in IE 8 Compatiblity mode..Am not able to get this working. The menu loads fine in Default Mode.
Any idea ?
Thanks,
Nutan
The overlapping bars -- indeed, the chart renders the area shapes from the first one, which makes the last bar to appear on top, but it is the first one to be considered by the browser when it comes to interaction-- context menu or tooltips. The fix here is to reverse the order of the chart imagemap area elements. Here is a sample javascript function:
<script type=
"text/javascript"
>
function
pageLoad() {
var
imageMap = $get(
"im<%= RadChart1.ClientID %>"
);
var
areaElements = imageMap.getElementsByTagName(
"AREA"
);
for
(
var
i = areaElements.length; i > 0; i--) {
imageMap.insertBefore(areaElements[areaElements.length - 1], areaElements[areaElements.length - i]);
}
}
</script>
As for the context menu in compatibility mode - this really seems as a bug, but we need some more time to research the reasons for it. I'll write you as soon as we have a result.
Kind regards,
Yana
the Telerik team
Looking forward to hear from you soon on compatibility mode issue as well.
Thanks,
Nutan
Thank you for your patience. We researched the issue in compatibility mode and it seems that this is a known problem in IE with image map (RadChart is rendered as an image map) and contextmenu event as demonstrated here.
We've prepared a work-around with the help of jquery, please download the attached file and give it a try.
Best wishes,
Yana
the Telerik team