Readonly Diagram -> Allow Only Selection and Double Click

[Sinan Oran]

Hi,

I need to make the diagram control as read only. I can achieve by setting DiagramConstraints = None.

However, diagram elements such as nodes and connectors should be able to select and double click event should work.

How can I achieve that?

Could you please help me about that?

Kind Regards

Sinan Oran

[Aravind Ravi]

Hi Sinan,

We have created a sample to disable interactions in diagram and enable selection for the diagram. To disable interaction or any editing in the diagram set diagram tool as None. If we want to select a node or connector in the diagram and disable interaction in the diagram means then set diagram Tool as None | SingleSelect. So if we perform any interaction in diagram means diagram do not get edited and on selecting the node or connector , the node gets selected. While double click on the diagram DoubleClick event gets fired.  Please refer the below code snippet for how to set diagram tool 

 

DiagramProperties model = new DiagramProperties(); 

model.Tool = Tool.None | Tool.SingleSelect; 

 ViewData["DiagramModel"] = model; 

 

For more information about diagram tool selection, please refer to below UG documentation link 

 

UG link: https://help.syncfusion.com/aspnetmvc/diagram/tools#tool-selection 

 

Regards 

Aravind Ravi 

[Sinan Oran]

Hi Aravind,

I'm not able to see DiagramProperties class. Can you please send an example?

Kind Regards

Sinan Oran

[Aravind Ravi]

Hi Sinan, 

 

We have created a sample to disable interaction in the diagram and enable editing the nodes and connectors. Please find the sample in below link 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156626/ze/Palette-1302546634 

 

Regards 

Aravind Ravi 

[Sinan Oran]

Hi Aravind,

I think I couldn't explain my problem.

I have one screen. Users are able to add , edit or view diagrams in this screen.

If the user doesn't have edit permission. I want to show diagram as readonly. Also,  we have some configuration on nodes and connectors.

When user double clicks to connectors or nodes, we show this configuration as popup.

If user doesn't have edit permission, I'm setting Diagram.Constraints = DiagramConstraints.None | DiagramConstraints.Zoom. 

So the user isn't able to do anything on diagram.

However, I want to the user to be able to select node or connectors on diagram and then double click (nothing else).

In the example which you shared, I'm able to everything on diagram.

Additionally, I changed Diagram.Constraints = DiagramConstraints.None | DiagramConstraints.Zoom | DiagramConstraints.UserInteraction. 

But the user is able to delete nodes and connectors on diagram in this case.

Kind Regards

Sinan Oran

[Aravind Ravi]

Hi Sinhan, 

By using the NodeConstraints and ConnectorConstraints we can able to restrict the node and connector remove from diagram. Remove the Delete constraints from the node and connector constraints. So that when you try to delete the node or connector , it do not gets removed from the diagram. Instead of set the diagram constraints, set diagram tool as None | SingleSelect. Please find the below code snippet for how to set node constraints 

Connector connector = new Connector(); 

            connector.Name = "line" + model.Connectors.Count + 1; 

            connector.TargetNode = targetNode; 

            connector.SourceNode = sourceNode; 

            connector.SourcePort = sourcePort; 

            connector.TargetPort = targetPort; 

            connector.Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Delete; 

FlowShape node = new FlowShape(); 

           node.Name = name; 

            node.Width = width; 

            node.Shape = shape; 

            node.Height = height; 

            node.OffsetX = offsetx; 

            node.Constraints = NodeConstraints.Default & ~NodeConstraints.Delete; 

DiagramProperties model = new DiagramProperties(); 

model.Tool = Tool.None | Tool.SingleSelect; 

We have attached a sample for your reference. Please find the sample in below link 

Sample: https://www.syncfusion.com/downloads/support/forum/156626/ze/Palette1521195578 

Regards 

Aravind Ravi 

[Sinan Oran]

Thank you Aravind for your help.

[Aravind Ravi]

Hi Sinhan, 

 

Most Welcome. 

 

Regards 

Aravind Ravi