pan diagram using mouse left click and drag

[Jong]

Hello.

I'm trying to allow users to choose the mouse left click and drag behavior.

The default behavior of mouse left click and drag is selecting shapes and connections.

But I want the user to choose to select shapes and connection or pan the diagram using mouse left click and drag.

I found a thread about this, and I used diagram.scroller.enabled = true to change the mouse left click and drag behavior.

But there are some minor issues.

First issue is the mouse cursor. I want the mouse cursor to be the grab cursor, but it looks like diagram forces the cursor to be pointer.

I tried changing the cursor manually after the diagram is initialized, but it looks like the cursor inline style changes whenever the mouse hovers the diagram.

How can I change the cursor?

 

Another issue is the selection rectangle is still being rendered when diagram.scroller.enabled is set to true.

As you can see in the attachment, when diagram.scroller.enabled is true, and mouse left is clicked and dragged, the diagram pans as expected, but it renders a small selection rectangle. 

How can I remove this selection rectangle? when diagram.scroller.enabled  == true?

Or is using diagram.scroller.enabled the right way?

 

Thank you!

[Tsvetomir]

Hi Jong,

Thank you for the provided details on the functionality that you seek to achieve. Indeed, when the styles are inline there is no other option than overriding them with the !important keyword:

#diagram {
    cursor: grab!important; 
  }

As per the selection, what I can recommend is that you reinitialize the widget with the selectable option disabled:

var options = $("#diagram").getKendoDiagram().options;
  $("#diagram").getKendoDiagram();
 options.selectable = false;
 $("#diagram").kendoDiagram(options);

I hope you find this helpful.

 

Kind regards,
Tsvetomir
Progress Telerik