Hand cursor on series for drilldown

3 posts, 0 answers
  1. RBeco
    RBeco avatar
    15 posts
    Member since:
    Apr 2013

    Posted 20 Nov 2013 Link to this post

    I have implemented drill down functionality for a column chart but I want my users to actually see they can click it by changing the cursor to the hand cursor on mouseover. I can see no way to get that done. Hoping someone can help.

    Thanks!
  2.
  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 25 Nov 2013 Link to this post

    Hello,

    The chart does not render as standard HTML you can style with CSS to control the pointer. This means that generally such functionality cannot be achieved.

    Nevertheless, you can try adding some code that will change the pointer globally when the mouse is over certain series (their names are up to your custom logic) and then the mouse moves out of the chart you can restore the default cursor. For example:

    ASPX:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" DataSourceID="SqlDataSource1"
        onmouseout="onmouseoutHandler();" OnClientSeriesClicked="OnClientSeriesClicked"
        OnClientSeriesHovered="OnClientSeriesHovered">
        <ChartTitle Text="Revenue">
        </ChartTitle>
        <PlotArea>
            <Series>
                <telerik:ColumnSeries DataFieldY="Rev" Name="Years">
                </telerik:ColumnSeries>
            </Series>
            <XAxis DataLabelsField="Year">
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>

    JavaScript:
    function OnClientSeriesHovered(sender, args)
    {
        //removes the document handler to avoid the fact that
        //the event bubbles to the body and the browser will reset the cursor
        document.onmouseover = null;
        if (args.get_seriesName() != "Months")
        {
            //if a certain series is hovered - change the pointer.
            //With a timeout to allow for the first event bubble to pass
            setTimeout(function () {
                document.body.style.cursor = "pointer"
            }, 50);
        }
        return false;
    }
      
    //attached to onmouseout of the chart wrapper to restore the cursor
    //as soon asthe mouse moves on the chart
    function onmouseoutHandler(e)
    {
        document.body.onmouseover = restoreCursor;
    }
    //the handler that restores the cursor for the page
    function restoreCursor()
    {
        document.body.style.cursor = "";
    }
    //resets the cursor
    document.body.onmouseover = restoreCursor;

    Note that I cannot guarantee this will work in all cases, scenarios and browsers. It seems to do fine on my end when integrated in the drilldown demo. You can further optimize the logic, use better approaches to attach the handlers, etc.

    Regards,
    Danail Vasilev
    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.
  5. RBeco
    RBeco avatar
    15 posts
    Member since:
    Apr 2013

    Posted 26 Nov 2013 Link to this post

    Thank you for this. I implemented your code and it works like a charm!
Back to Top