Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class Side - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class Side

    Specifies where the user handles have to be aligned.

    Inheritance
    System.Object
    Side
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public sealed class Side : Enum
    Remarks
    To know more about using the side, refer to this link
    1. UserHandles
    To apply the user handle side, use the below code.
    Examples
    <SfDiagram Height="600px" Nodes="@NodeCollection" SelectedItems="@SelectedModel">
    </SfDiagram>
    @code{
       /// Defines diagram's nodes collection
       public ObservableCollection<DiagramNode> NodeCollection { get; set; }
       /// Defines diagram's SelectedItems
       public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; }
       ObservableCollection<DiagramUserHandle> UserHandles { get; set; }
       protected override void OnInitialized()
       {
           ///Creating the userhandle for cloning the objects
           DiagramUserHandle CloneHandle = new DiagramUserHandle()
           {
               ///Name of the user handle
               Name = "clone",
               ///Set pathdata for userhandle
               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",
               ///Set visibility for the user handle
               Visible = true,
               ///Set the position for the user handle
               Offset = 0,
               ///Set side based on the given offset
               Side = Side.Bottom,
               ///set margin for the user handle
               Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }
           };
           ///Add user handle to the collection...
           UserHandles = new ObservableCollection<DiagramUserHandle>()
           {
               CloneHandle
           };
           SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems()
           {
               ///Enable userhandle for selected items...
               Constraints = SelectorConstraints.UserHandle,
               UserHandles = this.UserHandles
           };
           NodeCollection = new ObservableCollection<DiagramNode>();
           DiagramNode DiagramNode = new DiagramNode()
           {
               Id = "node1",
               OffsetX = 100,
               OffsetY = 100,
               Width = 100,
               Height = 100,
               Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" },
               Annotations = new ObservableCollection<DiagramNodeAnnotation>() { new DiagramNodeAnnotation() { Content = "Node" } }
           };
           NodeCollection.Add(DiagramNode);
       }
    }

    Fields

    Bottom

    Aligns the user handles at the bottom of an object.

    Declaration
    public const Side Bottom
    Field Value
    Type Description
    Side

    Left

    Aligns the user handles at the left of an object.

    Declaration
    public const Side Left
    Field Value
    Type Description
    Side

    Right

    Aligns the user handles at the right of an object.

    Declaration
    public const Side Right
    Field Value
    Type Description
    Side

    Top

    Aligns the user handles at the top of an object.

    Declaration
    public const Side Top
    Field Value
    Type Description
    Side

    value__

    Declaration
    public int value__
    Field Value
    Type Description
    System.Int32
    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved