Blazor

Code Examples Upgrade Guide User Guide Demos Support Forums Download
  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class DiagramNode

    Show / Hide Table of Contents

    Class DiagramNode

    Represents the graphical objects that are used to visually represent the geometrical information.

    Inheritance
    System.Object
    SfDiagramBase
    DiagramNode
    Inherited Members
    SfDiagramBase.UpdateCollection(IList, Boolean)
    SfDiagramBase.RandomString(Int32)
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramNode : SfDiagramBase
    Remarks

    Nodes are graphical objects that are used to visually represent the geometrical information. A node can be resized by dragging the user handle proportionally or by selecting a side to make the shape taller or wider.

    Examples
    <SfDiagram Height="600px" Nodes="@NodeCollection">
    </SfDiagram>
    @code{
       public ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>() { };
       protected override void OnInitialized()
       {
         // A node is created and stored in the nodes collection.
         DiagramNode Node = new DiagramNode()
         {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }
          };
          // Add node
          NodeCollection.Add(Node);
        }
     }

    Constructors

    DiagramNode()

    Represents the graphical objects that are used to visually represent the geometrical information.

    Declaration
    public DiagramNode()

    Properties

    AddInfo

    It allows the user to store additional information about the nodes.

    Declaration
    public object AddInfo { get; set; }
    Property Value
    Type Description
    System.Object
    Remarks

    Enables the user to store data of any datatype. It will be serialized and deserialized automatically while saving and opening the diagram.

    Examples
    public List<NodeAddInfo> AddInfo = new List<NodeAddInfo>()
     {
       new NodeAddInfo() { Content = "NodeContent", ParentID = "diagram" }
     };
     protected override void OnInitialized()
     {
        DiagramNode Node = new DiagramNode()
       {
            // Position of the node
            OffsetX = 250,
            OffsetY = 250,
            // Size of the node
            Width = 100,
            Height = 100,
            AddInfo = AddInfo
        };
        // Add node
        NodeCollection.Add(Node);
      }
    public class NodeAddInfo
    {
       public string ParentID;
       public string Content;
     }

    Annotations

    It allows the user to store the collection of textual annotations of the node.

    Declaration
    public ObservableCollection<DiagramNodeAnnotation> Annotations { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<DiagramNodeAnnotation>
    Remarks

    Annotation is used to textually represent an object with a string that can be edited at runtime. Users can able to modify the annotation Style, Visibility, Width, Height, and content of the annotation.

    BackgroundColor

    Get or Set node BackGroundColor, by default its Transparent.

    Declaration
    public string BackgroundColor { get; set; }
    Property Value
    Type Description
    System.String

    Branch

    Specifies Mindmap Branch.

    Declaration
    public Nullable<BranchTypes> Branch { get; set; }
    Property Value
    Type Description
    System.Nullable<BranchTypes>
    Remarks

    Users can able to set the Branch based on its parent element.

    Examples
    public class MindMapDetails
    {
      public string Branch { get; set; }
    }
    public object DataSource = new List<object>()
    {
      new MindMapDetails() { Id= "1", Label="Creativity", ParentId ="", Branch = "Root" },
      new MindMapDetails() { Id= "2",  Label="Brainstorming", ParentId ="1", Branch = "subLeft" },
      new MindMapDetails() { Id= "3",  Label="Complementing", ParentId ="1", Branch = "subLeft" },
      new MindMapDetails() { Id= "4",  Label="Sessions", ParentId ="1", Branch = "subRight" },
      new MindMapDetails() { Id= "5",  Label="Complementing", ParentId ="1", Branch = "subRight" },
     };

    Children

    Represents the children in a group element.

    Declaration
    public string[] Children { get; set; }
    Property Value
    Type Description
    System.String[]

    CollapseIcon

    Represents the state of the node.

    Declaration
    public NodeCollapseIcon CollapseIcon { get; set; }
    Property Value
    Type Description
    NodeCollapseIcon
    Remarks

    CollapseIcon can be aligned relative to the node boundaries. User can able to Customize CollapseIcon using BorderColor, BorderWidth, Fill, etc.

    ColumnIndex

    Used to define an index of the column in the grid, by default it is undefined.

    Declaration
    public double ColumnIndex { get; set; }
    Property Value
    Type Description
    System.Double

    ColumnSpan

    Merge the column use the property in the grid container.

    Declaration
    public double ColumnSpan { get; set; }
    Property Value
    Type Description
    System.Double

    Constraints

    The constraints property allows you to enable or disable certain behaviors or the node. Annotation.

    Declaration
    public NodeConstraints Constraints { get; set; }
    Property Value
    Type Description
    NodeConstraints

    Data

    Nodes can be generated automatically with the information provided through the data.

    Declaration
    public object Data { get; set; }
    Property Value
    Type Description
    System.Object

    DragSize

    Defines the size of a drop symbol.

    Declaration
    public SymbolSizeModel DragSize { get; set; }
    Property Value
    Type Description
    SymbolSizeModel

    ExcludeFromLayout

    Defines whether the node should be positioned automatically or not. Applicable, if the layout option is enabled.

    Declaration
    public bool ExcludeFromLayout { get; set; }
    Property Value
    Type Description
    System.Boolean

    ExpandIcon

    Represents the state of the node.

    Declaration
    public NodeExpandIcon ExpandIcon { get; set; }
    Property Value
    Type Description
    NodeExpandIcon
    Remarks

    ExpandIcon can be aligned relative to the node boundaries. User can able to Customize ExpandIcon using BorderColor, BorderWidth, Fill, etc.

    FixedUserHandles

    It allows the user to store the collection of Fixed User Handles of the node.

    Declaration
    public ObservableCollection<DiagramNodeFixedUserHandle> FixedUserHandles { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<DiagramNodeFixedUserHandle>

    Flip

    A flip is performed to give the mirror image of the original element.

    Declaration
    public FlipDirection Flip { get; set; }
    Property Value
    Type Description
    FlipDirection

    Height

    Gets or sets the node height.

    Declaration
    public double Height { get; set; }
    Property Value
    Type Description
    System.Double
    Remarks

    The height of a node does not include borders or margins.

    HorizontalAlignment

    Describes how a node should be positioned or stretched in HorizontalAlignment.

    Declaration
    public HorizontalAlignment HorizontalAlignment { get; set; }
    Property Value
    Type Description
    HorizontalAlignment

    Id

    Returns the unique id of the node.

    Declaration
    public string Id { get; set; }
    Property Value
    Type Description
    System.String
    Remarks

    Node Id needs to be unique to use. While creating a node, the user should not provide the same id to other nodes.

    IsExpanded

    Defines Whether the node is expanded or not.

    Declaration
    public bool IsExpanded { get; set; }
    Property Value
    Type Description
    System.Boolean

    LayoutInfo

    Sets the layout properties using node property.

    Declaration
    public DiagramNodeLayoutInfo LayoutInfo { get; set; }
    Property Value
    Type Description
    DiagramNodeLayoutInfo
    Examples
    TreeInfo LayoutInfo = new TreeInfo()
     {
       CanEnableSubTree = true,
       Orientation = SubTreeOrientation.Horizontal
      };
      protected override void OnInitialized()
       {
         LayoutValue = new DiagramLayout()
         {
            Type = LayoutType.HierarchicalTree,
            VerticalSpacing = 30,
            HorizontalSpacing = 30,
            EnableAnimation = true,
            LayoutInfo = this.LayoutInfo
         };
       }

    Margin

    Specifies the space around the node. The default values for the margin are set to 0 from all sides.

    Declaration
    public NodeMargin Margin { get; set; }
    Property Value
    Type Description
    NodeMargin

    MaxHeight

    Sets the maximum height of the node.

    Declaration
    public double MaxHeight { get; set; }
    Property Value
    Type Description
    System.Double

    MaxWidth

    Sets the maximum width of the node.

    Declaration
    public double MaxWidth { get; set; }
    Property Value
    Type Description
    System.Double

    MinHeight

    Sets the minimum height of the node.

    Declaration
    public double MinHeight { get; set; }
    Property Value
    Type Description
    System.Double

    MinWidth

    Sets the minimum width of the node.

    Declaration
    public double MinWidth { get; set; }
    Property Value
    Type Description
    System.Double

    OffsetX

    Sets the X-coordinate of the position of the node, by default its 0.

    Declaration
    public double OffsetX { get; set; }
    Property Value
    Type Description
    System.Double

    OffsetY

    Sets the Y-coordinate of the position of the node, by default its 0.

    Declaration
    public double OffsetY { get; set; }
    Property Value
    Type Description
    System.Double

    Pivot

    Sets the reference point, that will act as the offset values (offsetX, offsetY) of a node.

    Declaration
    public NodePivotPoint Pivot { get; set; }
    Property Value
    Type Description
    NodePivotPoint
    Remarks
    Pivot values range from 0 to 1. By default, the Pivot values are set to X= 0.5 and Y=0.5.
    1. When X= 0 and Y = 0, OffsetX and OffsetY values are considered as the top-left corner of the node.
    2. When X= 0.5 and Y = 0.5, OffsetX and OffsetY values are considered as the node’s center point.
    3. When X= 1 and Y = 1, OffsetX and OffsetY values are considered as the bottom-right corner of the node.

    Ports

    Represents a port or connection point in the node. points of nodes/connectors.

    Declaration
    public ObservableCollection<DiagramPort> Ports { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<DiagramPort>
    Remarks

    Ports act as the connection points of node and allow them to create connections with only those specific points. There may be any number of ports in a node. You can able to modify the Ports appearance, visibility, positioning, and can add custom shapes to it.

    PreviewSize

    Defines the size of the symbol preview.

    Declaration
    public SymbolSizeModel PreviewSize { get; set; }
    Property Value
    Type Description
    SymbolSizeModel

    RotateAngle

    Sets the rotate angle of the node, by default it is 0.

    Declaration
    public double RotateAngle { get; set; }
    Property Value
    Type Description
    System.Double

    RowIndex

    Used to define an index of the row in the grid.

    Declaration
    public double RowIndex { get; set; }
    Property Value
    Type Description
    System.Double

    RowSpan

    Merge the row use the property in the grid container.

    Declaration
    public double RowSpan { get; set; }
    Property Value
    Type Description
    System.Double

    Shadow

    Defines the shadow of a node.

    Declaration
    public DiagramShadow Shadow { get; set; }
    Property Value
    Type Description
    DiagramShadow
    Remarks

    Shadow effect to a node is disabled, by default. It can be enabled with the constraint’s property of the node. The Angle, Distance, and Opacity of the shadow can be customized with the shadow property of the node.

    Shape

    Defines the geometrical representation of a node.

    Declaration
    public DiagramShape Shape { get; set; }
    Property Value
    Type Description
    DiagramShape
    Remarks

    A provided option such as BasicShape, PathModel, BPMNShapemodel, etc.

    Style

    Provides the options to personalize or customize the appearance of the node.

    Declaration
    public NodeShapeStyle Style { get; set; }
    Property Value
    Type Description
    NodeShapeStyle
    Remarks

    A provided option such as Fill, StrokeColor, StrokeWidth, Gradient, etc.

    Examples
    DiagramNode Node = new DiagramNode()
    {
        // Position of the node
        OffsetX = 250,
        OffsetY = 250,
        // Size of the node
        Width = 100,
        Height = 100,
        // Add node
        Style = new NodeShapeStyle() { Fill = "#6BA5D7", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 },
     };

    SymbolInfo

    Defines the information of the symbol.

    Declaration
    public SymbolInfo SymbolInfo { get; set; }
    Property Value
    Type Description
    SymbolInfo

    Tooltip

    Specifies the message that is displayed when the mouse hovers over a node.

    Declaration
    public NodeTooltip Tooltip { get; set; }
    Property Value
    Type Description
    NodeTooltip
    Remarks

    By default, Tooltip will provide the size, position, and angle related information while dragging, resizing, and rotating.

    Examples
    //...
    public DiagramTooltip Tooltip = new DiagramTooltip()
    {
       Content = "Nodes",
       Position = Syncfusion.Blazor.Popups.Position.TopLeft
     };
      DiagramNode Node = new DiagramNode()
      {
       Id = "node1",
       Width = 100,
       Height = 100,
       OffsetX = 200,
       OffsetY = 200,
       Style = new NodeShapeStyle() { StrokeColor = "#6BA5D7", Fill = "#6BA5D7" },
       Constraints = NodeConstraints.Default | NodeConstraints.Tooltip,
       }
      //...

    VerticalAlignment

    Describes how a node should be positioned or stretched in VerticalAlignment.

    Declaration
    public VerticalAlignment VerticalAlignment { get; set; }
    Property Value
    Type Description
    VerticalAlignment

    Visible

    Enables or disables the visibility of the node, by default its true.

    Declaration
    public bool Visible { get; set; }
    Property Value
    Type Description
    System.Boolean

    Width

    Gets or sets the node Width.

    Declaration
    public double Width { get; set; }
    Property Value
    Type Description
    System.Double
    Remarks

    The width of a node does not include borders or margins.

    ZIndex

    Defines the visual order of the node in DOM.

    Declaration
    public double ZIndex { get; set; }
    Property Value
    Type Description
    System.Double
    Remarks

    The property specifies the stack order of the node. A node with greater stack order is always in front of a node with a lower stack order.

    Methods

    BeginUpdate()

    Prevents redrawing of model on the client side.

    Declaration
    public void BeginUpdate()

    EndUpdate()

    Enable redrawing of model on the client side.

    Declaration
    public void EndUpdate()
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved