Serialization

6 Jun 20192 minutes to read

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

Save

The Diagram is serialized as JSON data while saving. The client side method, save helps to serialize the Diagram as JSON. The following code illustrates how to save the Diagram.

var diagram = $("#Diagram").ejDiagram("instance");

//save() returns serialized JSON data of the Diagram
var json = diagram.save();

This JSON data can be converted to string and stored for future use. The following snippet illustrates how to save the serialized JSON into local storage.

//Saves the JSON object in to local storage
localStorage.setItem("diagram", JSON.stringify(json));

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

Load

Diagram is loaded from the Serialized JSON data. The client side method, load helps you to load the Diagram from the serialized JSON. The following code illustrates how to load the Diagram from serialized JSON data.

//Retrieves the JSON object from local storage
json = JSON.parse(localStorage.getItem("diagram"));

//Loads the Diagram from saved JSON data
diagram.load(json);

NOTE

Before loading a new Diagram, existing Diagram is cleared.

Limitation

There are some limitations in saving/loading the Diagrams and they are listed as follows.

When define the events as a string, functions need to be maintained in the application level while loading the diagram.

ASPX-CS
JS
<ej:Diagram ID="DiagramContent" runat="server" Height="400px" Width="100%" OnClientNodeCollectionChange="nodeCollectionChange">
</ej:Diagram>
function nodeCollectionChange(args) {
}

HTML / Native template needs to be retained in the application level, while loading the native and HTML node.

ASPX-CS

<!-- Template content needs to be retained while loading the diagram.-->
<script id="htmlTemplate" type="text/x-jsrender">
	<div>
		<input type="button" value="button" style="color: #ffffff; background-color: #fbb139; border-color: #f89b1c" />
	</div>
</script>

diagram.load(json);

CSS classes have to be retained in the application level, while loading the Diagram.

ASPX-CS

<style>
	<!-- CSS class needs to be retained while loading the Diagram.-->
	.nodeCss {
		fill: black;
		stroke: cyan;
	}
</style>

diagram.load(json);