Chart Pan and zoom in Sortable

[Konstantin]

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?

[Tsvetina]

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

[Konstantin]

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. 

[Tsvetina]

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

[Konstantin]

Hello,

Do you register an issue? Or what solution?

[Tsvetina]

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

[Konstantin]

Thanks