Hand cursor on series for drilldown

[RBeco]

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!

[Danail Vasilev]

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

[RBeco]

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