Disable deleting/editting of a shape within a diagram

[Shane]

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

[Hristo Germanov]

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

 

 

[Shane]

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.

[T. Tsonev]

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