This is a migrated thread and some comments may be shown as answers.

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

1 Answer 76 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Naga Kiran
Top achievements
Rank 1
Naga Kiran asked on 30 Jul 2013, 01:41 AM
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?

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 01 Aug 2013, 12:50 PM
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!
Tags
Charts
Asked by
Naga Kiran
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or