Articles in this section
Category / Section

How to make nodes read-only except for selection in Blazor Diagram?

3 mins read

In a Blazor Diagram, preventing nodes in the SfDiagramComponent from being moved can be achieved by disabling all constraints of the node except for the selection constraints. Additionally, to prevent edit operations, enabling the ReadOnly constraints for annotations is necessary. For more detailed information, please refer to the links below:

Code Snippet:

// Create a new node with specific constraints
Node node = new Node()
{
   ID = "node1",
   // Position of the node
   OffsetX = 250,
   OffsetY = 250,
   // Size of the node
   Width = 100,
   Height = 100,
   // Annotations with ReadOnly constraints
   Annotations = new DiagramObjectCollection<ShapeAnnotation>()
   {
       new ShapeAnnotation()
       {
           Constraints = AnnotationConstraints.ReadOnly
       }
   },
   // Node constraints set to allow only selection
   Constraints = NodeConstraints.Default & ~(NodeConstraints.Drag | 
                                             NodeConstraints.Rotate | 
                                             NodeConstraints.Shadow | 
                                             NodeConstraints.Delete | 
                                             NodeConstraints.Inherit | 
                                             NodeConstraints.InConnect | 
                                             NodeConstraints.Resize),
   // Style of the node
   Style = new ShapeStyle() 
   { 
       Fill = "#6495ED", 
       StrokeColor = "white" 
   }
};

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning about how to make nodes read-only except for selection in Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking feature, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied