Locking down the diagram - make it non-editable

[Daniel]

Hi,

I am looking to create a simple flow chart starting from the url below.  The point is to provide a quick workflow guide to users ... they should not be able to edit the diagram

https://docs.telerik.com/kendo-ui/knowledge-base/diagram-create-flowchart

 

I was able to lock down the flow chart by making only these changes

zoom: 0

selectable: false

connectionDefaults.editable: false

 

When hovering over shapes I still get the 5 yellow dots that would seem to indicate that an action is possible (it isn't because I set connectionDefaults.editable: false), but is there a way for the dots to NOT appear on hover? Hopefully you can simply point me to the right Boolean that I missed

 

Thank you

Daniel

[Daniel]

I was able to figure it out ... the API reference had a couple of layers: I should have been looking here instead of ui.diagram 

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/shape

The shapes are created via var shape = new kendo.dataviz.diagram.Shape(shapeOptions);

Simply passing in editable:false to this constructor does the trick

Thanks!

[Tsvetina]

Hi Daniel,

For the sake of completeness of the solution, you could also prevent interaction with the Diagram shapes if you set selectable: false in the Diagram options.

var diagram = $("#diagram").kendoDiagram({

  connectionDefaults: {
    endCap: {
      type: 'ArrowEnd',
      fill: {
        color: "#222222"
      }
    }
  },
  shapeDefaults: {
  },
  selectable: false,
  zoom: 0
}).getKendoDiagram();

But setting editable.connect = false inside the shapes is also useful to prevent the hover effect in shapes:

var shapeOptions = {
  id: options.id,
  x: options.positionX,
  y: options.positionY,
  width: options.width || 100,
  height: options.height || 50,
  type: options.type,
  path: options.path || undefined,
  content: {
    text: options.textData || undefined,
    color: options.textData.length> 15? 'transparent' : '#fff'
  },
  editable: {
      connect: false
  },
  fill: options.fillColor || '#0088CC'
};

var shape = new kendo.dataviz.diagram.Shape(shapeOptions);

An example of a Diagram that allows no user interactions at all:
https://dojo.telerik.com/iMufuxUD

Regards,
Tsvetina
Progress Telerik