How to Serialize the HTML Template Value of the NodeTemplate Property in Syncfusion Blazor Diagram?

When using the Syncfusion® Blazor Diagram component, you may want to save and load diagram data that includes custom HTML templates, specified through the NodeTemplate property. By default, the SaveDiagram method does not automatically serialize complex objects like HTML content stored in the AdditionalInfo dictionary. This guide provides instructions to serialize HTML content for preserving it during save and load operations.

Step-by-Step Implementation

Step 1: Initialize Nodes with HTML Content
Define nodes with HTML content by storing the HTML template in the AdditionalInfo dictionary for each node.

Node node = new Node()
{
   ID = "node1",
   Width = 210,
   Height = 95,
   OffsetX = 400,
   OffsetY = 300,
   Shape = new Shape()
   {
       Type = NodeShapes.HTML,
   },
   AdditionalInfo = new Dictionary<string, object>()
   {
       { "HtmlTemplate", "<div><h3 style=\"color:blue;\">Hello, Syncfusion!</h3><p>This is an HTML shape node</p></div>" }
   }
}; 

Step 2: Serialize the Diagram with HTML Content
Before saving the diagram, ensure the HTML content is included in the serialized data using the SaveDiagram method.

private void Save()
{
   // Serialize the HTML content for each node
    savedData = diagram.SaveDiagram();
} 

Step 3: Deserialize and Restore HTML Content
When loading the diagram, restore the HTML content in the AdditionalInfo dictionary to render it correctly.

private void Load()
{
   // Load the diagram data
   diagram.LoadDiagram(savedData);
} 

<SfDiagramComponent @ref="diagram" Height="600px" @bind-Nodes="@nodes">
   <DiagramTemplates>
       <NodeTemplate>
           @{
                   Node node = context as Node;
                   if (node.AdditionalInfo.ContainsKey("HtmlTemplate"))
                   {
                       object htmlTemplate = node.AdditionalInfo["HtmlTemplate"];
                       string htmlContent;

                       if (htmlTemplate is JsonElement jsonElement)
                       {
                           // If it's a JsonElement, extract the string
                           htmlContent = jsonElement.GetString();
                       }
                       else if (htmlTemplate is string stringContent)
                       {
                           // If it's already a string, use it directly
                           htmlContent = stringContent;
                       }
                       else
                       {
                           // Handle unexpected types or nulls, if necessary
                           htmlContent = string.Empty;
                       }

                       // Convert the string HTML content to a MarkupString
                       var markupContent = new MarkupString(htmlContent);
                       @markupContent
                   }
               }
           </NodeTemplate>
       </DiagramTemplates>
   </SfDiagramComponent> 

Output:

You can download the complete working sample from here.

Conclusion:

We hope you enjoyed learning how to serialize the HTML template value of the NodeTemplate property in Syncfusion® Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, 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!