• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Save and Load in ASP.NET Core Diagram Control

This sample visualizes building diagrams interactively and editing the saved diagrams. Symbol Palette is used to easily build diagrams.

DEMO
SOURCE

This example shows how to drag-and-drop shapes and connectors from symbol palette to build diagrams. You can save the diagram as text files and edit the pre-saved diagrams. saveDiagram method can be used to save the diagram as string. TheloadDiagram method can be used to load the diagram from a string.The loaded event is triggered once the diagram has completely loaded, and the first node in the diagram has been selected during the event call. In this example, context menu and undo/redo features are enabled.

The diagram component’s features are segregated into individual feature-wise modules. To enable undo/redo support, inject UndoRedo module using Diagram.Inject(UndoRedo) method. To enable context menu, inject DiagramContextMenu module using Diagram.Inject(DiagramContextMenu) method.

The uploader API control is used to load the JSON data into a diagram asynchronously. Define the properties saveUrl, which will receive the uploaded files and save them on the server, and removeUrl, which will receive the file information and handle the removal of files from the server.

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab