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

Prevent Shape Editing but not Moving (Dragging)

3 Answers 41 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 15 Sep 2017, 01:08 PM
How do I turn off editing and deletion of shapes in a diagram, but still allow them to be repositioned by dragging? I can turn off editing for shapes, connectors and the whole diagram, but then I can't move them.

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 19 Sep 2017, 09:20 AM
Hello Ian,

The Diagram has a shapeDefaults.editable.tools configuration option that lets you specify the list of tools that should be available in the widget. It should be a non-empty array, but you can, for example, only declare the Undo and Redo options, which are meaningful when the user is dragging shapes:
shapeDefaults: {
  editable: {
    tools: ["undo", "redo"]
  }
}

You can see the result here:
http://dojo.telerik.com/@tsveti/OTOmAs/3


Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ian
Top achievements
Rank 1
answered on 19 Sep 2017, 11:22 AM
Is this also possible using the server side wrapper? If so, would you have an example? 
0
Accepted
Tsvetina
Telerik team
answered on 19 Sep 2017, 12:19 PM
Hello Ian,

To start with, I should note that the Undo and Redo tools are only meaningful in the Diagram toolbar and not the shapes tools, so my suggestion about using them was not correct. When it comes to shapes, the supported tools are the ones listed in the API reference:
"edit" - The selected item can be edited.
"delete" - The selected items can be deleted.
"rotateClockwise" - The selected items can be rotated clockwise. The default rotation value is 90 degree.
"rotateAnticlockwise" - The selected items can be rotated anticlockwise. The default rotation value is 90 degree.

You can set them like this in an MVC Diagram:
.ShapeDefaults(sd => sd
     .Editable(e => e
          .Tools(ts => ts.Edit()...)
          .Tools(ts => ts.Delete()...)
          .Tools(ts => ts.RotateClockwise()...)
          .Tools(ts => ts.RotateAnticlockwise()...)
      )
)


Regards,
Tsvetina
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram
Asked by
Ian
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Ian
Top achievements
Rank 1
Share this question
or