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

pan diagram using mouse left click and drag

1 Answer 220 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Jong
Top achievements
Rank 1
Veteran
Jong asked on 27 Jan 2021, 03:00 PM

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!

1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 29 Jan 2021, 11:28 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Diagram
Asked by
Jong
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
Share this question
or