Class DiagramTemplates

Represents a collection of UI content templates for diagram elements, implemented as delegates that define the rendering content for nodes in the SfDiagramComponent.

Inheritance

System.Object

DiagramTemplates

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class DiagramTemplates : ComponentBase

Remarks

The DiagramTemplates class provides a centralized way to define custom templates for diagram elements using delegates that generate UI content dynamically.

Templates support data binding and can be used to customize the appearance.

Constructors

DiagramTemplates()

Declaration

public DiagramTemplates()

Properties

AnnotationTemplate

Gets or sets the template for rendering annotations in the SfDiagramComponent.

Declaration

public RenderFragment<Annotation> AnnotationTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<Annotation>	A Microsoft.AspNetCore.Components.RenderFragment<> of type Annotation representing the custom template for rendering annotations. The default value is null.

Remarks

Defines a custom template for rendering annotations within diagram nodes and connectors. The template receives an Annotation context object and requires the annotation's Template property to be true.

Examples

The following example demonstrates how to create a custom annotation template with interactive elements.

<SfDiagramComponent  Nodes="@nodes"/>
<DiagramTemplates>
        <AnnotationTemplate>
            @if(context is Annotation annotation)
            {
                if (annotation.ID == "Annotation1")
                {
                    <div style = "display: flex; justify-content: center; align-items: center; height: 50px;">
                        <SfTextBox Value = "Syncfusion"></SfTextBox>
                    </div>
                }
            }
        </AnnotationTemplate>
 </DiagramTemplates>
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation()
                {
                    ID = "Annotation1",
                    Template = true,
                    Height = 50,
                    Width = 75,                 
                },
            },

        };
    }
}

ChildContent

Gets or sets the child content that defines the template structure for the DiagramTemplates component.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the UI content template that will be rendered within the diagram templates container. The default value is null.

Remarks

Defines custom template content. When null, default rendering is used.

DiagramCollapseIconTemplate

Gets or sets the template for customizing the collapse icon in the SfDiagramComponent.

Declaration

public RenderFragment<DiagramCollapseIcon> DiagramCollapseIconTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<DiagramCollapseIcon>	A Microsoft.AspNetCore.Components.RenderFragment<> that defines the UI template for rendering collapse icons. The default value is null.

Remarks

Customizes collapse icons in diagram nodes or groups. When null, default styling is applied.

The template receives a DiagramCollapseIcon context for customization.

Examples

The following example demonstrates how to define a custom collapse icon template:

<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors">
 <DiagramTemplates>
    <DiagramCollapseIconTemplate>
    @{
        <div style="height: 100%; width: 100%">
            <input type="button" value="Collapse" />
        </div>
      } 
     </DiagramCollapseIconTemplate>
  </DiagramTemplates>
 </SfDiagramComponent>
@code {
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
   protected override void OnInitialized()
   {
        nodes = new DiagramObjectCollection<Node>(){};
        connectors = new DiagramObjectCollection<Connector>(){};
        Node node1 = new Node()
        {
            ID = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 300, 
            OffsetY = 100,
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Template,
                Height = 20,
                Width = 20,
            },
            CollapseIcon = new DiagramCollapseIcon()
            {
                Shape = DiagramCollapseIcons.Template,
                Height = 20,
                Width = 20,
             },
         };
         nodes.Add(node1);
         Node node2 = new Node()
         {
            ID = "node2",
            Width = 100,
            Height = 100,
            OffsetX = 300,
            OffsetY = 400,
            ExpandIcon = new DiagramExpandIcon()
            { 
                Shape = DiagramExpandIcons.Template,
                Height = 20,
                Width = 20,
            },
            CollapseIcon = new DiagramCollapseIcon()
            {
               Shape = DiagramCollapseIcons.Template,
               Height = 20,
               Width = 20,
            },
        };
        nodes.Add(node2);
        Connector connector1 = new Connector()
        {
           ID = "connector1",
           SourceID = "node1",
           TargetID = "node2",
        };
        connectors.Add(connector1);
   }
}

DiagramExpandIconTemplate

Gets or sets a template that defines the custom HTML content for rendering DiagramExpandIcon elements.

Declaration

public RenderFragment<DiagramExpandIcon> DiagramExpandIconTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<DiagramExpandIcon>	A Microsoft.AspNetCore.Components.RenderFragment<> that defines the custom HTML content for diagram expand icons. The default value is null.

Remarks

Allows customization of expand icon appearance and behavior. When null, uses default rendering.

The template context provides access to DiagramExpandIcon properties for custom rendering logic.

Examples

The following example demonstrates how to define a custom expand icon template:

<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors">
 <DiagramTemplates>
    <DiagramExpandIconTemplate> 
    @{
        <div style="height: 100%; width: 100%">
            <input type="button" value="Collapse" />
        </div>
      } 
     </DiagramExpandIconTemplate>
  </DiagramTemplates>
 </SfDiagramComponent>
@code {
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
   protected override void OnInitialized()
   {
        nodes = new DiagramObjectCollection<Node>(){};
        connectors = new DiagramObjectCollection<Connector>(){};
        Node node1 = new Node()
        {
            ID = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 300, 
            OffsetY = 100,
            ExpandIcon = new DiagramExpandIcon()
            {
                Shape = DiagramExpandIcons.Template,
                Height = 20,
                Width = 20,
            },
            CollapseIcon = new DiagramCollapseIcon()
            {
                Shape = DiagramCollapseIcons.Template,
                Height = 20,
                Width = 20,
             },
         };
         nodes.Add(node1);
         Node node2 = new Node()
         {
            ID = "node2",
            Width = 100,
            Height = 100,
            OffsetX = 300,
            OffsetY = 400,
            ExpandIcon = new DiagramExpandIcon()
            { 
                Shape = DiagramExpandIcons.Template,
                Height = 20,
                Width = 20,
            },
            CollapseIcon = new DiagramCollapseIcon()
            {
               Shape = DiagramCollapseIcons.Template,
               Height = 20,
               Width = 20,
            },
        };
        nodes.Add(node2);
        Connector connector1 = new Connector()
        {
           ID = "connector1",
           SourceID = "node1",
           TargetID = "node2",
        };
        connectors.Add(connector1);
   }
}

FixedUserHandleTemplate

Gets or sets the template for rendering custom content within fixed user handles in the SfDiagramComponent.

Declaration

public RenderFragment<FixedUserHandle> FixedUserHandleTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<FixedUserHandle>	A Microsoft.AspNetCore.Components.RenderFragment<> that defines the custom HTML content for fixed user handles. The default value is null.

Remarks

Defines custom HTML content for fixed user handles with access to FixedUserHandle properties. Applied to all handles unless overridden individually.

Examples

The following example demonstrates how to create a custom button template for fixed user handles.

 

 <SfDiagramComponent @bind-Constraints="@diagramConstraints" Height="600px" Nodes="@nodes" /> 
<DiagramTemplates> 
 <FixedUserHandleTemplate> 
  @{  
 <div style="height: 100%; width: 100%; background:green"> 
  <input type="button" value="Button1" @onclick="@OnClick" /> 
  </div> 
  } 
 </FixedUserHandleTemplate> 
 </DiagramTemplates> 
 @code 
 { 
Node node = new Node() 
{ 
    FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>() 
    { 
        new NodeFixedUserHandle() 
        { 
            ID = "user1", 
            Height = 20,  
            Width = 20,  
            Visibility = true, 
            Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 },  
            Margin = new DiagramThickness() { Right = 20 }, 
        }, 
    } 
}; 

NodeTemplate

Gets or sets the template for rendering custom UI content within nodes in the SfDiagramComponent.

Declaration

public RenderFragment<Node> NodeTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<Node>	A Microsoft.AspNetCore.Components.RenderFragment<> representing the UI content template that will be rendered within diagram nodes. The default value is null.

Remarks

Defines custom HTML content for nodes with Node context. Requires node shape type to be HTML.

Examples

The following example demonstrates how to create a custom node template with interactive elements.

<SfDiagramComponent  Nodes="@nodes" />
<DiagramTemplates>
 <NodeTemplate>
  @{ var id = (context as Node).ID;
 <div style="height: 100%; width: 100%; background:green">
  <input type="button" value="Button1" @onclick="@OnClick" />
  </div>
  }
 </NodeTemplate>
 </DiagramTemplates>
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node = new Node()
        {
            ID = "node1",
              Shape = new Shape() { Type = NodeShapes.HTML },
        };
    }
}

TooltipTemplate

Gets or sets the template for rendering a custom tooltip in the SfDiagramComponent.

Declaration

public RenderFragment<object> TooltipTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<System.Object>	A Microsoft.AspNetCore.Components.RenderFragment<> where T is System.Object that defines the custom tooltip content. The default value is null.

Remarks

Defines custom HTML content for tooltips on diagram elements. The template context provides access to the target element's properties.

Requires tooltip constraints to be enabled on the target element and proper DiagramTooltip configuration.

Examples

The following example demonstrates how to create a custom tooltip template that displays different content based on the target element.

  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind- Nodes="@nodes">  
    <DiagramTemplates>
        <TooltipTemplate>
        @{
            var target = context as NodeBase;
            if (target.ID == "node1")
            {
                <div>
                    <p>Name : Diagram</p><p>Element: @target</p><p>action: Auto</p>
                </div>
            }
        }
        </TooltipTemplate>
    </DiagramTemplates>
</SfDiagramComponent>
 @code
 {
    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
    protected override void OnInitialized()
    {
        Node node1 = new Node()
        {
            ID = "node1",
            Width = 100,
            Height = 100,
            OffsetX = 100,
            OffsetY = 100,
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                // Annotation is created and stored in Annotations collection of Node.
                new ShapeAnnotation { Content = "Auto" }
            },
            Tooltip = new DiagramTooltip()
            {
                Position = Position.BottomCenter,
                OpensOn = "Auto",
                ShowTipPointer = true,
            },
            Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,

        };
        nodes.Add(node1);
    }
}

UserHandleTemplate

Gets or sets a template that defines the custom UI content for rendering user handles in the SfDiagramComponent.

Declaration

public RenderFragment<UserHandle> UserHandleTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<UserHandle>	A Microsoft.AspNetCore.Components.RenderFragment<> that provides custom rendering for user handles. The default value is null.

Remarks

Defines a custom template for rendering user handles with a UserHandle context object. Overrides default appearance and allows complete UI customization including interactive elements.

Examples

The following example demonstrates how to create a custom user handle template with a button.

 <SfDiagramComponent @bind-Constraints="@diagramConstraints" Height="600px" Nodes="@nodes" />
<DiagramTemplates>
 <UserHandleTemplate>
  @{ 
 <div style="height: 100%; width: 100%; background:green">
  <input type="button" value="Button1" @onclick="@OnClick" />
  </div>
  }
 </UserHandleTemplate>
 </DiagramTemplates>
 @code
 {
Node node = new Node()
{
    FixedUserHandles = new DiagramObjectCollection<NodeFixedUserHandle>()
    {
        new NodeFixedUserHandle()
        {
            ID = "user1",
            Height = 20, 
            Width = 20, 
            Visibility = true,
            Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, 
            Margin = new DiagramThickness() { Right = 20 },Offset = new DiagramPoint() { X = 0, Y = 0 }, 
            PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z"
        },
    }
};

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose()

Releases all unmanaged resources used by the DiagramTemplates component.

Declaration

public void Dispose()

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.