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

Chart Pan and zoom in Sortable

6 Answers 22 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Konstantin
Top achievements
Rank 1
Konstantin asked on 12 Mar 2019, 08:34 AM

Hello,

Some problem with move by mouse in "Bar Charts / Pan and zoom" when use kendoSortable

https://dojo.telerik.com/ApavImA

How do i must use it together?

6 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 14 Mar 2019, 06:58 AM
Hello Konstantin,

I have trouble opening the Dojo link that you shared. Could you try copying the link address again?

As for the problem itself, it is expected if the Chart is placed within a Sortable element. The Sortable captures the events related to dragging elements within its area and these events do not reach the Chart. A possible solution would be to set the Sortable ignore option to a selector that would match the Chart elements. In this way, the Sortable will stop listening for drag events on the Chart element and the Chart will be able to handle them to allow pan and zoom.

Regards,
Tsvetina
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.
0
Konstantin
Top achievements
Rank 1
answered on 14 Mar 2019, 08:10 AM

Hello,

Sorry, i am skip one symbol: https://dojo.telerik.com/ApavImAr

It's not help: https://dojo.telerik.com/ApavImAr/4

I am use 'handler', I think that's enough. 

0
Tsvetina
Telerik team
answered on 15 Mar 2019, 01:38 PM
Hi Konstantin,

Yes, creating a handler outside the Chart and using only it to drag the .item elements around is enough. I wasn't sure before I saw your example if the Chart was the only element inside the draggable item.

Regards,
Tsvetina
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.

0
Konstantin
Top achievements
Rank 1
answered on 26 Mar 2019, 09:48 AM

Hello,

Do you register an issue? Or what solution?

0
Accepted
Tsvetina
Telerik team
answered on 27 Mar 2019, 02:46 PM
Hello Konstantin,

My understanding was that the handler solved the issue for you. I see now that there were still some glitches while trying to pan. The reason is that the Chart is not a single element that the ignore setting can target. To make the ignore setting better, I wrapped the Chart element in an additional div and used a * selector after the div class name:
<div class="demo-section k-content wide">
  <div class='item'>
    <span class="handler">Move</span>
    <div class="wrapper">
      <div id="chart1"></div>
    </div>
  </div>
  <div class='item'>
    <span class="handler">Move</span>
    <div class="wrapper">
      <div id="chart2"></div>
    </div>
  </div>
</div>

$(".demo-section").kendoSortable({
  handler: ".handler",
  ignore: '.wrapper *',
  hint:function(element) {
    return element.clone().addClass("hint");
  }
});

With this selector, all elements inside the wrapper will be ignored by the Sortable. 

Here is the updated example:
https://dojo.telerik.com/ApavImAr/9

Regards,
Tsvetina
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.
0
Konstantin
Top achievements
Rank 1
answered on 28 Mar 2019, 05:09 AM
Thanks
Tags
Charts
Asked by
Konstantin
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Konstantin
Top achievements
Rank 1
Share this question
or