Context Menu?

Thread is closed for posting
9 posts, 0 answers
  1. Brian Azzi
    Brian Azzi avatar
    65 posts
    Member since:
    Mar 2010

    Posted 21 Jun 2010 Link to this post

    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
  2. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 24 Jun 2010 Link to this post

    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
  3. Nutan
    Nutan  avatar
    15 posts
    Member since:
    Oct 2008

    Posted 14 Jan 2011 Link to this post

    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
  4. Bart
    Bart avatar
    1 posts
    Member since:
    Dec 2009

    Posted 14 Jan 2011 Link to this post

    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

     

     

     

     

  5. Nutan
    Nutan  avatar
    15 posts
    Member since:
    Oct 2008

    Posted 24 Jan 2011 Link to this post

    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
  6. Nutan
    Nutan  avatar
    15 posts
    Member since:
    Oct 2008

    Posted 28 Jan 2011 Link to this post

    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
  7. Yana
    Admin
    Yana avatar
    4888 posts

    Posted 02 Feb 2011 Link to this post

    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.
  8. Nutan
    Nutan  avatar
    15 posts
    Member since:
    Oct 2008

    Posted 04 Feb 2011 Link to this post

    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
  9. Yana
    Admin
    Yana avatar
    4888 posts

    Posted 10 Feb 2011 Link to this post

    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.
Back to Top