Using RadChart with RadMenu

[Joe]

I'm using the RadChart to display some data and I'm looking for the ability to add some functionality so that when a user clicks, or right-clicks on a chartseries item, the chart displays some type of menu with a series of actions that would be tied to the chartseries that they clicked.  Is there any RadMenu support for the RadChart?  I know that there is a click event for the chart, but it seems to be server side. Any other ideas are welcome.

Thanks!
Steve

[Vladimir Milev]

Hi Steve Thompson,

Thanks for writing about this. There is indeed a click-event for the chart, however, it is just what it is - a simple click event, implemented using an image map. RadChart is rendered as a standard image tag and you may attach a RadMenu to work as a context menu for that element. I suppose, however, you imagine it containing some context sensitive information. Can you please elaborate a bit about your ideas so we can consider if it is something that is possible to implement.


Kind regards,
Vladimir Milev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Joe]

I'm glad to hear that a RadMenu can be attached to the RadChart.  Essentially what I have is a Gantt chart view of Audits.  An audit is just an activity that spans a certain time frame, for example: Jan 1 - Mar 15, or May 10th - Dec. 14th.  There is usually more than one audit in the chart, which gives it the gantt chart look and feel.  Right now I have it so that when you click on the chartseriesitem, it displays some simple data about the audit that they clicked on in the iframe at the bottom of the screen.  That works fine, however, it's only one action.  I need around 3 actions for any given audit (chart series item), so that's where I was thinking about the RadMenu.  I was hoping to have the user right click, or just click the chart series item, and display a menu that contained the following items (actions):
- Show Availability
- Change Start/End Date
- Show audit calendar

These items in the menu would basically link to functionality that already exists, so I would most likely load up the control in the iframe that I have below the RadChart.  So basically I would want to set some type of NavigateUrl property on the RadMenu or some property that allows me to call a javascript function or set a URL and pass parameters that are unique to the audit that has been clicked on.  Each Audit has a AuditId (a unique id for the audit), so I would want to pass this in the querystring of the URL.  That's all I meant by the context sensitive information.  A simple menu that has no context about where/what the user clicked on isn't enough, it would have to know that I clicked on the chartseries item for a certain audit since there could be 10-15 audits on one page.  Hopefully this makes some sense, if not, I'll try to explain better. 

If you have some sample code on how to implement the radmenu on a RadChart using the OnClick event, that would be very helpful.  Thanks!

Steve

[Vladimir Milev]

Hi Steve Thompson,

We will post a code library entry soon which will display how to integrate RadChart with RadMenu. Stay tuned.

Best wishes,
Vladimir Milev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Joe]

Just to provide an update on this topic, I have been able to successfully implement the described solution above where the RadChart is using the RadContextMenu.  Just letting you know, so you don't have to spend more time trying to provide a code sample.  Basically the solution we came up with is this:

-Add an onClick attribute to the chart series item and call the showMenu function.  Code looks like this.

csi.ActiveRegion.Attributes = csi.ActiveRegion.Attributes + "onClick=\"showMenu(event);onItemOpening(auditId)\"";

the showMenu javascript function takes the event and it simply displays the menu using the show method.  The onItemOpening function takes a parameter that is unique to the chartseriesitem, in this case, it's auditId.  The creation of this attribute is inside a loop, so auditId is different each time.  You can view the HTML source to see the markup.  This function then adds the menu items using the add function, and uses set_Text. 

var menu = $find("RadContextMenu1");
var dynamicItem = new Telerik.Web.UI.RadMenuItem();
dynamicItem.set_Text('Menu item 1');
menu.get_Items().add(dynamicItem);

var anchor = dynamicItem.get_linkElement();
anchor.href = "javascript:loadURLinDetailsView()";
menu.commitChanges();


Thanks
Steve

[Ves]

Hi Steve Thompson,

Thank you for providing the code, it could be really helpful to others, trying to achieve a similar goal. Your Telerik points have been updated for contributing to the Telerik community.

Sincerely yours,
Ves
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Nutan]

Hi,

Can you provide a demo implementation for this..? I trying to get this working but no progress yet...

Thanks,
Nutan