Class DiagramTemplates

Represents a segment of UI content, implemented as a delegate that writes the content of a node.

Inheritance

System.Object

DiagramTemplates

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class DiagramTemplates : ComponentBase

Constructors

DiagramTemplates()

Declaration

public DiagramTemplates()

Properties

AnnotationTemplate

Gets or sets the template for rendering annotations.

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 template for rendering annotations.

Remarks

Use this property to provide a custom template for rendering annotations.

Examples

<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

Represents a segment of UI content, implemented.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment

DiagramCollapseIconTemplate

Represents a segment of the UI to be rendered for a DiagramCollapseIcon.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment<DiagramCollapseIcon>

DiagramExpandIconTemplate

Represents a segment of the UI to be rendered for a DiagramExpandIcon.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment<DiagramExpandIcon>

FixedUserHandleTemplate

Gets or sets the template for rendering a fixed user handle.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment<FixedUserHandle>

Remarks

The template should accept a FixedUserHandle object and return the rendered HTML as a Microsoft.AspNetCore.Components.RenderFragment.

Examples

 

 <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

Represents a segment of the UI to be rendered for a node.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment<Node>

Examples

<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 tooltip.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment<System.Object>

Examples

  

<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

Represents a segment of the UI to be rendered for a user handle.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment<UserHandle>

Examples

 <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()

This method releases all unmanaged resources.

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.