Context Menu for HTMLChart

5 posts, 0 answers
  1. Tom
    Tom avatar
    18 posts
    Member since:
    Nov 2011

    Posted 25 Sep 2013 Link to this post

    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?
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 30 Sep 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gabriel
    Gabriel avatar
    4 posts
    Member since:
    Aug 2013

    Posted 16 Apr 2015 in reply to Marin Bratanov Link to this post

    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.

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 17 Apr 2015 Link to this post

    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.

     
  6. Gabriel
    Gabriel avatar
    4 posts
    Member since:
    Aug 2013

    Posted 17 Apr 2015 in reply to Marin Bratanov Link to this post

    Thank you for your reply, I'll try to make it work.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017