Prevent Shape Editing but not Moving (Dragging)

4 posts, 1 answers
  1. Ian
    Ian avatar
    6 posts
    Member since:
    Feb 2012

    Posted 15 Sep Link to this post

    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.
  2. Tsvetina
    Admin
    Tsvetina avatar
    2107 posts

    Posted 19 Sep Link to this post

    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.
  3. Ian
    Ian avatar
    6 posts
    Member since:
    Feb 2012

    Posted 19 Sep in reply to Tsvetina Link to this post

    Is this also possible using the server side wrapper? If so, would you have an example? 
  4. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2107 posts

    Posted 19 Sep Link to this post

    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.
Back to Top