Disable deleting/editting of a shape within a diagram

4 posts, 1 answers
  1. Shane
    Shane avatar
    2 posts
    Member since:
    Dec 2014

    Posted 15 Dec 2014 Link to this post

    Hi there,

    We are trying out kendo to see if it meets our needs.

    Using the Diagram control I have added a couple of shapes containing information that I don't want a user to remove or edit.

    Can I 
    a. Disable deleting of certain shapes
    b. Disable moving of certain shapes.


    Thanks
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 17 Dec 2014 Link to this post

    Hello Shane,

    1) If you override the shape.editable.tools with the tools that you need. If you set empty tools array the toolbar will not be visible.
    2) Currently the you can't prevent the shapes from moving but you can add an UserVoice item for this request.

    Regards,
    Hristo Germanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Shane
    Shane avatar
    2 posts
    Member since:
    Dec 2014

    Posted 17 Dec 2014 in reply to Hristo Germanov Link to this post

    Thanks Hristo,

    Straight from the example site
    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
        var dataItem = options.dataItem;
        if (dataItem.JobTitle === 'President') {
            g.append(new dataviz.diagram.Circle({
                radius: 60,
                stroke: {
                    width: 2,
                    color: '#586477'
                },
                fill: dataItem.Color || '#e8eff7'
            }));
        } else {
            g.append(new dataviz.diagram.Rectangle({
                width: 240,
                height: 67,
                stroke: { width: 0 },
                fill: '#e8eff7'
            }));
            g.append(new dataviz.diagram.Rectangle({
                width: 8,
                height: 67,
                fill: dataItem.Color,
                stroke: { width: 0 }
            }));
        }
        return g;
    }


    If I wanted to use shape.editable.tools how would I disable the president item "dataItem.JobTitle === 'President'"  from being deleted. All other shapes can be deleted however I don't want this shape to be removed.

    Sorry but not following along with the documentation on how to achieve this.
  5. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 19 Dec 2014 Link to this post

    Hello,

    I see what you mean. We can set up this kind of restriction by setting the shape selectable flag.
    This has to be done after the shapes are created:
    function onDataBound(e) {
      // Wait until all shapes are created
      setTimeout(function () {
        // Disable selection (and modification) of specific shapes
        $.each(e.sender.shapes, function() {
          if (this.dataItem.JobTitle === "President") {
            this.options.selectable = false;
          }
        });
      }, 0);
    }

     
    I've prepared a snippet to demonstrate.
    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready