Serialization in Diagram Control

3 Jan 20231 minute to read

Serialization is the process of saving and loading for state persistence of the diagram.

Save

The diagram is serialized as string while saving. The client-side method, saveDiagram helps to serialize the diagram as a string.

var diagramElement = document.getElementById('element');
var diagram = diagramElement.ej2_instances[0];
var saveData;
//returns serialized string of the Diagram
saveData = diagram.saveDiagram();

This string can be converted to JSON data and stored for future use.

//Saves the string in to local storage
localStorage.setItem('fileName', saveData);
saveData = localStorage.getItem('fileName');

Diagram can also be saved as raster or vector image files. For more information about saving the diagram as images, refer to Print and Export.

Load

Diagram is loaded from the serialized string data by client-side method, loadDiagram.

var diagramElement = document.getElementById('element');
var diagram = diagramElement.ej2_instances[0];

//Loads the Diagram from saved json data
diagram.loadDiagram(saveData);

NOTE

Before loading a new diagram, existing diagram is cleared.

Prevent Default Values

The preventDefaults property of serializationSettings is used to simplifying the saved JSON object without adding the default properties that are presented in the diagram.

var diagram: Diagram = new Diagram({
 serializationSettings: { preventDefaults: true },
});