Setting mouse pointer style on legend

10 posts, 0 answers
  1. Dan
    Dan avatar
    3 posts
    Member since:
    Jun 2011

    Posted 30 Jan Link to this post

    I'm sure the answer is something simple. I am trying to set my chart's legend cursor (mouse pointer) to "default" after the chart has already been created. I can't seem to figure out the correct syntax. Your help will be greatly appreciated.Thanks in advance.

    var radHtmlChartObject = $find("<%=RadHtmlChart1.ClientID %>"); //the standard control object
    var kendoChart = radHtmlChartObject.get_kendoWidget(); //the Kendo widget

    //Examples that work correctly

    kendoChart.options.legend.position = "top";
    kendoChart.options.legend.labels.background = "green";

    //None of these work for me:
    kendoChart.options.legend.item.cursor = "default";
    kendoChart.options.legend.item.cursor.style = "default";
    kendoChart.options.legend.item[0].cursor = "default";
    kendoChart.options.legend.item[0].cursor.style = "default";
    kendoChart.options.legend.items.cursor = "default";
    kendoChart.options.legend.items.cursor.style = "default";

     

  2. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 04 Feb Link to this post

    Hello Dan,

    You can change the cursor of the legend items via a CSS class:

    <style>
        .k-chart svg path {
            cursor: default !important;
        }
    </style>


    or programmatically via the setOptions method as shown below:


    <script>
        function OnLoad(sender, args) {
            var kendoWidget = sender.get_kendoWidget();
            var opts = kendoWidget.options;
     
            var itm = opts.legend.item || {};
            itm.cursor = { style: "default" };
            opts.legend.item = itm;
     
            kendoWidget.setOptions(opts);
     
            kendoWidget.redraw();
        }
    </script>
    <telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500" Skin="Silk">
        <ClientEvents OnLoad="OnLoad" />
        <PlotArea>
            <Series>
                <telerik:PieSeries>
                    <SeriesItems>
                        <telerik:PieSeriesItem Name="first" Y="1" />
                        <telerik:PieSeriesItem Name="second" Y="3" />
                        <telerik:PieSeriesItem Name="third" Y="5" />
                    </SeriesItems>
                </telerik:PieSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>



    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Dan
    Dan avatar
    3 posts
    Member since:
    Jun 2011

    Posted 04 Feb in reply to Rumen Link to this post

    Hi Rumen,

    Thanks for the helpful information. I couldn't get the CSS example to work for me, but the second example worked perfectly.

    Best wishes,

    Dan

  4. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 05 Feb Link to this post

    You are welcome, Dan!

    You mentioned that the CSS solution does not work for you, which means that it possibly won't work for other guys too.

    That's why I recorded and attached a video for all of you showing how it works on my end.

    Best regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 23 May in reply to Rumen Link to this post

    Is there a way to change the cursor when it's over a bar on a column series chart? I've been playing the the CSS, and the way it is right now the cursor changes any time it enters the body of the chart. I'd just like to change the cursor when it's over the bar, but I don't immediately see how to do that.

  6. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 28 May Link to this post

    Hi Bryan,

    Here you are a solution for your scenario based on the client-side OnSeriesHovered event of the series:

    <telerik:RadHtmlChart runat="server" ID="chart" >
             <ClientEvents  OnSeriesHover ="OnSeriesHovered " />
             <PlotArea>
                 <Series>
                     <telerik:ColumnSeries Name="first">
                         <SeriesItems>
                             <telerik:CategorySeriesItem Y="1" />
                             <telerik:CategorySeriesItem Y="2" />
                             <telerik:CategorySeriesItem Y="3" />
                         </SeriesItems>
                     </telerik:ColumnSeries>
                     <telerik:ColumnSeries Name="second">
                         <SeriesItems>
                             <telerik:CategorySeriesItem Y="1" />
                             <telerik:CategorySeriesItem Y="2" />
                             <telerik:CategorySeriesItem Y="3" />
                         </SeriesItems>
                     </telerik:ColumnSeries>
                 </Series>
             </PlotArea>
         </telerik:RadHtmlChart>
         <script>
             function OnSeriesHovered(sender, args) {
                 sender.element.style.cursor = "crosshair";
                 sender.get_kendoWidget().redraw();
             }
         </script>


    Another solution is provided by a colleague in the following StackOverflow thread https://stackoverflow.com/questions/31111665/cursor-hand-symbol-change-in-radhtmlchart-columnseries-chart, e.g.

    <telerik:RadHtmlChart runat="server" ID="chart" onmouseout="onmouseoutHandler();">
             <ClientEvents OnSeriesHover="OnSeriesHover" />
             <PlotArea>
                 <Series>
                     <telerik:ColumnSeries Name="first">
                         <SeriesItems>
                             <telerik:CategorySeriesItem Y="1" />
                             <telerik:CategorySeriesItem Y="2" />
                             <telerik:CategorySeriesItem Y="3" />
                         </SeriesItems>
                     </telerik:ColumnSeries>
                     <telerik:ColumnSeries Name="second">
                         <SeriesItems>
                             <telerik:CategorySeriesItem Y="1" />
                             <telerik:CategorySeriesItem Y="2" />
                             <telerik:CategorySeriesItem Y="3" />
                         </SeriesItems>
                     </telerik:ColumnSeries>
                 </Series>
             </PlotArea>
         </telerik:RadHtmlChart>
         <script>
             function OnSeriesHover(e) {
                 document.onmouseover = null;
                 if (e.series.name) { 
                     e.preventDefault();
                     setTimeout(function () {
                         document.body.style.cursor = "pointer"
                     }, 50);
                 }
                 return false;
             }
     
             //attached to onmouseout of the chart wrapper to restore the cursor
             //as soon as the 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;
         </script>


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 28 May in reply to Rumen Link to this post

    Rumen:

    Thank you! The first solution you posted works great. Quick question, however: I pasted your solution in my project and it works fine with Chrome 74, but I get the following error with IE 11:

    Object doesn't support property or method 'get_kendoWidget'

    I'm currently using UI for ASP.NET AJAX R1 2019 SP1 (version 2019.1.215). We only have a handful of die-hards who are still using IE, so this isn't a critical error. I was wondering if this is somehow specific to my project, or if you can duplicate it on your end.

    I also had trouble getting the StackOverflow solution to work as well as your solution. I ended up increasing the timeout to 250, but I still have problems with the cursor not consistently changing when it's over the bar in the chart. This was tested on Chrome 74.

    Thank you!

    Bryan

  8. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 29 May Link to this post

    Hi Bryan,

    Please excuse me for the JS error that breaks the solution in IE!

    Here is a complete solution for all browsers:

    <telerik:RadHtmlChart runat="server" ID="chart">
        <ClientEvents OnSeriesHover="OnSeriesHovered" />
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="first">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="1" />
                        <telerik:CategorySeriesItem Y="2" />
                        <telerik:CategorySeriesItem Y="3" />
                    </SeriesItems>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries Name="second">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="1" />
                        <telerik:CategorySeriesItem Y="2" />
                        <telerik:CategorySeriesItem Y="3" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    <script>
        function OnSeriesHovered(sender, args) {
                sender.element.parentNode.setAttribute("style", "cursor: crosshair");
        }
    </script>



    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. bdrennen
    bdrennen avatar
    36 posts
    Member since:
    Dec 2009

    Posted 29 May in reply to Rumen Link to this post

    Rumen:

    Thank you--that works beautifully.

    Bryan

  10. Rumen
    Admin
    Rumen avatar
    13980 posts

    Posted 30 May Link to this post

    Great! Thank you for confirming it.

    Have a nice and productive day.


    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top