kendoStockChart: Issue with navigator selection [doesn't capture target element correctly in mousemove event]

2 posts, 0 answers
  1. Naga Kiran
    Naga Kiran avatar
    1 posts
    Member since:
    Oct 2012

    Posted 29 Jul 2013 Link to this post

    In Kendo StockChart(http://demos.kendoui.com/dataviz/financial/index.html), have observed that dragging the navigator in bottom chart doesn't work always as expected. When I want to narrow down the navigator range,by pulling in either right handle/left handle, instead of narrowing down it moves the navigator range.

    Looking at mousemove event handler in this case,shows that it decides whether to drag/narrow down the range,based on target element.
    So, in some cases though i start dragging the mouse with pointer on left handle, but mousemove event listener gets the target as selection between leftHandle and rightHandle.

    Looks in this case, the cursor width (cursor type e-reisze) is more than handle width and that's causing the issue.

    Is there any other better way to handle this scenario that works always?

    Also, have seen in some toolkits (nvd3), SVG is used for right/left handle that works very smooth instead of HTML controls. Is there any reason for not using SVG for right/left handle in KendoUI?
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2831 posts

    Posted 01 Aug 2013 Link to this post

    Hi,

    Thank you for reporting this problem.

    I think your observations about the resize cursor are spot on. Changing to the default cursor seems to resolves the problem. My guess is that the "hot spot" used for triggering events is in the cursor center. The cursor itself is larger and triggers hover on more distant elements.

    I think that we can resolve this by increasing the padding on the touch targets:
    .k-selection .k-leftHandle div {         
        margin: -20px 0 0 -15px;
        padding: 40px 30px 0 0; 
    }                           
                                
    .k-selection .k-rightHandle div {        
        margin: -20px 0 0 -15px;
        padding: 40px 0 0 30px; 
    }                           


    Future releases and internal builds will incorporate these changes.

    Not sure if using SVG elements will help here. One thing is certain, they won't be reusable with Canvas or VML rendering. Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top