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

Context Menu for HTMLChart

4 Answers 106 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 25 Sep 2013, 11:20 PM
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?

4 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 30 Sep 2013, 10:59 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Gabriel
Top achievements
Rank 1
answered on 16 Apr 2015, 06:19 PM

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.

0
Marin Bratanov
Telerik team
answered on 17 Apr 2015, 11:37 AM

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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Gabriel
Top achievements
Rank 1
answered on 17 Apr 2015, 06:23 PM
Thank you for your reply, I'll try to make it work.
Tags
Chart (HTML5)
Asked by
Tom
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Gabriel
Top achievements
Rank 1
Share this question
or