Context Menu for HTMLChart

[Tom]

I am looking to add a context menu on the chart to allow user to filter the data being shown along with a few other things.  Is this possible and are there any examples of doing this?

[Marin Bratanov]

Hello Tom,

There is no built-in context menu for the chart, but you can assign its wrapping element as a target of the RadContextMenu and use that as desired. Here are some resources and a small sample that you may find useful:
http://www.telerik.com/help/aspnet-ajax/menu-context-menus.html
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandmenu/defaultcs.aspx?product=menu
http://www.telerik.com/help/aspnet-ajax/htmlchart-client-side-api.html

<%--Assume the chart is databound, even though values are hardcoded for this example--%>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="300px">
    <PlotArea>
        <Series>
            <telerik:BarSeries>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1" />
                    <telerik:CategorySeriesItem Y="2" />
                    <telerik:CategorySeriesItem Y="3" />
                </SeriesItems>
            </telerik:BarSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>
<telerik:RadContextMenu runat="server" ID="RadContextMenu1" OnClientItemClicked="OnClientItemClicked">
    <Items>
        <telerik:RadMenuItem Text="Update"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="View Details"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Reset"></telerik:RadMenuItem>
    </Items>
    <Targets>
        <telerik:ContextMenuControlTarget ControlID="RadHtmlChart1" />
    </Targets>
</telerik:RadContextMenu>
<script type="text/javascript">
    function OnClientItemClicked(sender, args)
    {
        var text = args.get_item().get_text();
        switch (text)
        {
            case "Update":
                //get new data
                $find("<%=RadHtmlChart1.ClientID %>").set_dataSource();
                break;
            default:
                break;
        }
    }
</script>

Regards,
Marin Bratanov
Telerik

[Gabriel]

Hello Marin,

Is it possible to set the target of the contextual menu to an Item of a Series? what I want to accomplish is to allow the user to right-click on the bar, display a menu with some options that will then display a pop-up with a form to modify data relative to that specific series-item.

[Marin Bratanov]

Hello Gabriel,

RadContextMenu works with HTML elements, while RadHtmlChart rendesr SVG, so there cannot be a direct integration.

What I can suggest is looking into the SeriesClick event: http://www.telerik.com/help/aspnet-ajax/htmlchart-client-side-events.html. You can use the Kendo event it exposes (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#events-seriesClick) and once you have the desired information and the mouse location, you can show the context menu explicitly at that location: http://www.telerik.com/help/aspnet-ajax/menu-client-side-objects.html (see the showAt() method).

Regards,

Marin Bratanov
Telerik

 

 

[Gabriel]

Thank you for your reply, I'll try to make it work.