Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Port Collection
    Visibility
    • Visible
    • Hidden
    • Hover
    • Connect
    OffsetX
    OffsetY
    Border Width
    Size
    Fill Color
    • White
    • #1a1a1a
    • Black
    • Goldenrod
    • Indigo
    • Chocolate
    • DarkGoldenRod
    • FireBrick
    Border Color
    • Goldenrod
    • Indigo
    • Chocolate
    • DarkGoldenRod
    • White
    • #1a1a1a
    • Black
    • FireBrick
    Shape
    • Circle
    • Square
    • X
    • Path
    ActiveTool
    • None
    • Drag
    • Draw
    <%@ Page Title="Diagram-Port-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates port’s alignment and visibility behavior and also customizing the port appearance in the ASP.NET WEB diagram control." MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="PortDiagram.aspx.cs" Inherits="WebSampleBrowser.Diagram.PortDiagram" %>
    
    <%@ Register Assembly="Syncfusion.EJ.Web" Namespace="Syncfusion.JavaScript" TagPrefix="ej" %>
    
    <%@ Register TagPrefix="ej" Namespace="Syncfusion.JavaScript.Web" Assembly="Syncfusion.EJ.Web" %>
    <asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">
        <script src='<%= Page.ResolveClientUrl("~/Scripts/Diagram/Port.js")%>' type="text/javascript"></script>
        <script src='<%= Page.ResolveClientUrl("~/Scripts/Diagram/DiagramCommon.js")%>' type="text/javascript"></script>
    </asp:Content>
    
    <asp:Content ID="Content5" ContentPlaceHolderID="StyleSection" runat="server">
        <style type="text/css">
            .row .cols-sample-area {
                width: 67%;
            }
    
            .row .cols-prop-area {
                width: 31%;
            }
        </style>
    </asp:Content>
    
    <asp:Content runat="server" ID="ControlContent" ContentPlaceHolderID="ControlsSection">
        <ej:Diagram ClientIDMode="Static" ID="DiagramWebControl1" runat="server"></ej:Diagram>
    </asp:Content>
    <asp:Content ID="Content4" ContentPlaceHolderID="PropertySection" runat="server">
        <div id="sampleProperties">
            <div class="prop-grid">
                <div class="row">
                    <div class="col-md-3">
                        Port Collection
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="portcollection" Width="120px" WatermarkText="portName" Enabled="false" ClientSideOnChange="portcollectionChange" runat="server">
                        </ej:DropDownList>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Visibility
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ShowCheckbox="true" ID="visibility" Width="120px" Text="8" CssClass="visibility" Enabled="false" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="Visible" Value="1" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Hidden" Value="2" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Hover" Value="4" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Connect" Value="8" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        OffsetX
                    </div>
                    <div class="col-md-3">
                        <ej:NumericTextBox ClientIDMode="Static" ID="offsetX" MinValue="0" IncrementStep="0.1" MaxValue="1" Enabled="false" Width="120px" CssClass="offsetX" Value="0" DecimalPlaces="1" ClientSideOnChange="propertyChange" Name="numeric" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        OffsetY
                    </div>
                    <div class="col-md-3">
                        <ej:NumericTextBox ClientIDMode="Static" ID="offsetY" MinValue="0" IncrementStep="0.1" MaxValue="1" Enabled="false" Width="120px" CssClass="offsetY" Value="0" DecimalPlaces="1" ClientSideOnChange="propertyChange" Name="numeric" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Border Width
                    </div>
                    <div class="col-md-3">
                        <ej:NumericTextBox ClientIDMode="Static" ID="borderwidth" MinValue="1" Enabled="false" Width="120px" CssClass="borderWidth" Value="1" ClientSideOnChange="propertyChange" Name="numeric" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Size
                    </div>
                    <div class="col-md-3">
                        <ej:NumericTextBox ClientIDMode="Static" ID="portsize" MinValue="8" Enabled="false" Width="120px" CssClass="size" Value="8" ClientSideOnChange="propertyChange" Name="numeric" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Fill Color
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="background" Width="120px" CssClass="fillColor" Enabled="false" Text="White" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="White" Value="white" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="#1a1a1a" Value="#1a1a1a" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Black" Value="black" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Goldenrod" Value="goldenrod" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Indigo" Value="indigo" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Chocolate" Value="chocolate" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="DarkGoldenRod" Value="darkgoldenrod" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="FireBrick" Value="firebrick" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Border Color
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="backgroundborder" Width="120px" CssClass="borderColor" Enabled="false" Text="Black" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="Goldenrod" Value="goldenrod" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Indigo" Value="indigo" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Chocolate" Value="chocolate" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="DarkGoldenRod" Value="darkgoldenrod" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="White" Value="white" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="#1a1a1a" Value="#1a1a1a" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Black" Value="black" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="FireBrick" Value="firebrick" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-3">
                        Shape
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="portshape" Width="120px" CssClass="shape" Enabled="false" Text="Square" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="Circle" Value="circle" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Square" Value="square" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="X" Value="x" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Path" Value="path" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
                    </div>
                </div>
                <%--settool dropdown list--%>
                <div class="row">
                    <div class="col-md-3">
                        ActiveTool
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="setTool" Width="120px" CssClass="setTool" Enabled="false"  Text="None" ClientSideOnChange="propertyChange"  runat="server">
                            <Items>
                                <ej:DropDownListItem Text="None" Value="none" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Drag" Value="drag" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Draw" Value="draw" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
                    </div>
                </div>
                <div class="row hideNewText">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-3">
                        <ej:Button ID="submit" ShowRoundedCorner="true" Type="Button" runat="server" Width="50px" Text="Add" ClientSideOnClick="addnewport"></ej:Button>
                    </div>
                </div>
            </div>
        </div>
    </asp:Content>
    
    
    
    using Syncfusion.JavaScript.DataVisualization.DiagramEnums;
    using Syncfusion.JavaScript.DataVisualization.Models;
    using Syncfusion.JavaScript.DataVisualization.Models.Collections;
    using Syncfusion.JavaScript.DataVisualization.Models.Diagram;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Label = Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label;
    
    namespace WebSampleBrowser.Diagram
    {
        public partial class PortDiagram : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
                DiagramWebControl1.Height = "550px";
                DiagramWebControl1.Width = "100%";
                DiagramWebControl1.PageSettings.ScrollLimit = ScrollLimit.Diagram;
                DiagramWebControl1.OnClientSelectionChange = "selectionChange";
                DiagramWebControl1.Model.DefaultSettings.Connector = new Connector()
                {
                    Segments = new Collection() { new Segment(Segments.Orthogonal) }
                };
                
                FlowShape node1 = CreateNode("node1", FlowShapes.Terminator, 60, 30, 300, 85, "Start");
                node1.Ports.Add(AddPort("n1aport", 0.5f, 1, PortShapes.Square));
                FlowShape node2 = CreateNode("node2", FlowShapes.Process, 120, 60, 300, 205, "Process");
                node2.Ports.Add(AddPort("n2aport", 0, 0.5f, PortShapes.Square));
                node2.Ports.Add(AddPort("n2bport", 0.5f, 0, PortShapes.Circle));
                node2.Ports.Add(AddPort("n2cport", 1, 0.5f, PortShapes.Square));
                node2.Ports.Add(AddPort("n2dport", 0.5f, 1, PortShapes.X));
                FlowShape node3 = CreateNode("node3", FlowShapes.Decision, 120, 60, 550, 205, "Decision");
                node3.Ports.Add(AddPort("n3aport", 0, 0.5f, PortShapes.Square));
                node3.Ports.Add(AddPort("n3bport", 0.5f, 1, PortShapes.Square));
                FlowShape node4 = CreateNode("node4", FlowShapes.Process, 120, 60, 300, 380, "Process");
                node4.Ports.Add(AddPort("n4aport", 0, 0.5f, PortShapes.X));
                node4.Ports.Add(AddPort("n4bport", 0.5f, 0, PortShapes.Circle));
                node4.Ports.Add(AddPort("n4cport", 1, 0.5f, PortShapes.Path));
                node4.Ports.Add(AddPort("n4dport", 0.5f, 1, PortShapes.Square));
                FlowShape node5 = CreateNode("node5", FlowShapes.Terminator, 60, 30, 300, 500, "End");
                node5.Ports.Add(AddPort("n5aport", 0.5f, 0, PortShapes.Square));
                FlowShape node6 = CreateNode("node6", FlowShapes.Decision, 120, 60, 100, 300, "Decision");
                node6.Ports.Add(AddPort("n6aport", 0.5f, 0, PortShapes.Square));
                node6.Ports.Add(AddPort("n6bport", 0.5f, 1, PortShapes.Square));
                FlowShape node7 = CreateNode("node7", FlowShapes.Document, 120, 60, 550, 380, "Decision");
                node7.Ports.Add(AddPort("n7aport", 0.5f, 0, PortShapes.Square));
                node7.Ports.Add(AddPort("n7bport", 0, 0.5f, PortShapes.Square));
    
                Connector connector1 = new Connector() { SourceNode = "node1", TargetNode = "node2", SourcePort = "n1aport", TargetPort = "n2bport", Segments = new Collection() { new Segment(Segments.Straight) } };
                Connector connector2 = new Connector() { SourceNode = "node2", TargetNode = "node3", SourcePort = "n2cport", TargetPort = "n3aport" };
                Connector connector3 = new Connector() { SourceNode = "node2", TargetNode = "node6", SourcePort = "n2aport", TargetPort = "n6aport" };
                Connector connector4 = new Connector() { SourceNode = "node6", TargetNode = "node4", SourcePort = "n6bport", TargetPort = "n4aport" };
                Connector connector5 = new Connector() { SourceNode = "node2", TargetNode = "node4", SourcePort = "n2dport", TargetPort = "n4bport", Segments = new Collection() { new Segment(Segments.Straight) } };
                Connector connector6 = new Connector() { SourceNode = "node4", TargetNode = "node5", SourcePort = "n4dport", TargetPort = "n5aport" };
                Connector connector7 = new Connector() { SourceNode = "node3", TargetNode = "node7", SourcePort = "n3bport", TargetPort = "n7aport" };
                Connector connector8 = new Connector() { SourceNode = "node7", TargetNode = "node4", SourcePort = "n7bport", TargetPort = "n4cport" };
    
                DiagramWebControl1.SetTool = "SetTool";
                DiagramWebControl1.Nodes.Add(node1);
                DiagramWebControl1.Nodes.Add(node2);
                DiagramWebControl1.Nodes.Add(node3);
                DiagramWebControl1.Nodes.Add(node4);
                DiagramWebControl1.Nodes.Add(node5);
                DiagramWebControl1.Nodes.Add(node6);
                DiagramWebControl1.Nodes.Add(node7);
                DiagramWebControl1.Connectors.Add(connector1);
                DiagramWebControl1.Connectors.Add(connector2);
                DiagramWebControl1.Connectors.Add(connector3);
                DiagramWebControl1.Connectors.Add(connector4);
                DiagramWebControl1.Connectors.Add(connector5);
                DiagramWebControl1.Connectors.Add(connector6);
                DiagramWebControl1.Connectors.Add(connector7);
                DiagramWebControl1.Connectors.Add(connector8);
            }
    
          
            public Port AddPort(string name, float offsetX, float offsetY, PortShapes shape)
            {
                Port port = new Port();
                port.Name = name;
                port.Offset = new DiagramPoint(offsetX, offsetY);
                port.Visibility = PortVisibility.Visible;
                port.Shape = shape;
                if (shape == PortShapes.Circle)
                    port.BorderColor = "#E4B123";
                else if (shape == PortShapes.X)
                    port.BorderColor = "#F05023";
                else if (shape == PortShapes.Path)
                {
                    port.FillColor = port.BorderColor = "#3CB549";
                    port.PathData = "M6.805,0L13.61,10.703L0,10.703z";
                }
                else
                    port.BorderColor = "#D572AD";
                port.ConnectorPadding = 4;
                port.Constraints = PortConstraints.Connect | PortConstraints.ConnectOnDrag;
                return port;
            }
    
            public FlowShape CreateNode(string name, FlowShapes shapeType, double width, double height, double offsetX, double offsetY, string text)
            {
                FlowShape node = new FlowShape();
                node.Name = name;
                node.Width = width;
                node.Height = height;
                node.OffsetX = offsetX;
                node.OffsetY = offsetY;
                node.Shape = shapeType;
                node.Labels = new Collection();
                Syncfusion.JavaScript.DataVisualization.Models.Diagram.Label label = new Label();
                label.Text = text;
                node.Labels.Add(label);
                return node;
            }
        }
    }