This is a migrated thread and some comments may be shown as answers.

Context Menu?

8 Answers 156 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Brian Azzi
Top achievements
Rank 2
Brian Azzi asked on 21 Jun 2010, 07:17 PM
Does anyone know if it is possible to use the RAD menu control in conjunction with the chart? I'd like to be able to perform a particular operation depending on which bar is right clicked...

Any ideas / suggestions would be greatly appreciated.

Thanks!
-Brian

8 Answers, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 24 Jun 2010, 11:50 AM
Hi Brian Azzi,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Nutan
Top achievements
Rank 1
answered on 14 Jan 2011, 02:44 PM
Hi,

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>

Also there is one more problem with loading of context menu. I can see context menu only on first ChartSeriesItem for each series. If we set the ElementID , context menu should be visible on all ChartSeriesItem's for the particular series which as the same ElementID...right ?

Any suggestions ?

Thanks,
Nutan
0
Bart
Top achievements
Rank 1
answered on 15 Jan 2011, 02:07 AM

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

 

 

 

 

0
Nutan
Top achievements
Rank 1
answered on 24 Jan 2011, 07:37 AM
Hi 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
0
Nutan
Top achievements
Rank 1
answered on 28 Jan 2011, 01:07 PM
Hi,

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
0
Yana
Telerik team
answered on 02 Feb 2011, 05:09 PM
Hello 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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Nutan
Top achievements
Rank 1
answered on 04 Feb 2011, 01:52 PM
Thanks Yana for your support. The solution provided by you fixed the context menu issue for multiple series.

Looking forward to hear from you soon on compatibility mode issue as well.

Thanks,
Nutan
0
Yana
Telerik team
answered on 10 Feb 2011, 03:48 PM
Hello Brian,

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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
Chart (Obsolete)
Asked by
Brian Azzi
Top achievements
Rank 2
Answers by
Ves
Telerik team
Nutan
Top achievements
Rank 1
Bart
Top achievements
Rank 1
Yana
Telerik team
Share this question
or