Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    Label Collection
    OffsetX
    OffsetY
    Rotate Angle
    Font Color
    • White
    • #1a1a1a
    • Black
    • Goldenrod
    • Indigo
    • Chocolate
    • DarkGoldenRod
    • FireBrick
    Font Size
    Font Family
    • Arial
    • Aharoni
    • Bell MT
    • Fantasy
    • Times New Roman
    • Segoe UI
    • Verdona
    Horizontal Alignment
    • Left
    • Right
    • Center
    Vertical Alignment
    • Top
    • Bottom
    • Center
    Text Decoration
    • None
    • Underline
    • Overline
    • Line-Through
    Text Wrapping
    • WrapWithOverflow
    • NoWrap
    • Wrap
    Text
    
    <%@ Page Title="Diagram-Label-ASP.NET-SYNCFUSION"   Language="C#" MetaDescription="This sample demonstrates label’s alignment behavior and customizing the label appearance in the ASP.NET WEB diagram." MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="LabelDiagram.aspx.cs" Inherits="WebSampleBrowser.Diagram.LabelDiagram" %>
    
    <%@ 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/Label.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" OnClientSelectionChange="" 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">
                        Label Collection
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="labelcollection" Width="120px" WatermarkText="labelName" Enabled="false" ClientSideOnChange="labelcollectionChange" runat="server">
                        </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">
                        Rotate Angle
                    </div>
                    <div class="col-md-3">
                        <ej:NumericTextBox ClientIDMode="Static" ID="rotateAngle" MinValue="0" Enabled="false" Width="120px" CssClass="rotateAngle" Value="0" ClientSideOnChange="propertyChange" Name="numeric" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Font Color
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="fontcolor" Width="120px" CssClass="fontColor" Enabled="false" Text="Black" 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">
                        Font Size
                    </div>
                    <div class="col-md-3">
                        <ej:NumericTextBox ClientIDMode="Static" ID="fontsize" MinValue="12" Enabled="false" Width="120px" CssClass="fontSize" Value="12" ClientSideOnChange="propertyChange" Name="numeric" runat="server" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Font Family
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="fontfamily" Width="120px" CssClass="fontFamily" Enabled="false" Text="Arial" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="Arial" Value="Arial" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Aharoni" Value="Aharoni" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Bell MT" Value="Bell MT" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Fantasy" Value="Fantasy" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Times New Roman" Value="Times New Roman" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Segoe UI" Value="Segoe UI" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Verdona" Value="Verdona" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
    
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Horizontal Alignment
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="horizontalalignment" Width="120px" CssClass="horizontalAlignment" Enabled="false" Text="Center" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="Left" Value="left" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Right" Value="right" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Center" Value="center" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
    
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Vertical Alignment
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="verticalalignment" Width="120px" CssClass="verticalAlignment" Enabled="false" Text="Center" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="Top" Value="top" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Bottom" Value="bottom" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Center" Value="center" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
    
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Text Decoration
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="textdecoration" Width="120px" CssClass="textDecoration" Enabled="false" Text="None" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="None" Value="none" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Underline" Value="underline" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Overline" Value="overline" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Line-Through" Value="line-through" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
    
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        Text Wrapping
                    </div>
                    <div class="col-md-3">
                        <ej:DropDownList ClientIDMode="Static" ID="textwrapping" Width="120px" CssClass="wrapping" Enabled="false" Text="WrapWithOverflow" ClientSideOnChange="propertyChange" runat="server">
                            <Items>
                                <ej:DropDownListItem Text="WrapWithOverflow" Value="wrapwithoverflow" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="NoWrap" Value="nowrap" runat="server"></ej:DropDownListItem>
                                <ej:DropDownListItem Text="Wrap" Value="wrap" runat="server"></ej:DropDownListItem>
                            </Items>
                        </ej:DropDownList>
    
                    </div>
                </div>
                <div class="row hideNewText">
                    <div class="col-md-3" id="textcontainer">
                        Text
                    </div>
                    <div class="col-md-3">
                        <input clientidmode="Static" type="text" id="text" style="width: 120px;" />
                    </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="addnewlabel"></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 LabelDiagram : 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.Node = new BasicShape()
                {
                    BorderColor = "#179B89",
                    Constraints = NodeConstraints.Default | NodeConstraints.CrispEdges
                };
                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));
                FlowShape node2 = CreateNode("node2", FlowShapes.Process, 120, 60, 300, 205, "Process");
                node2.Ports.Add(AddPort("n2aport", 0, 0.5f));
                node2.Ports.Add(AddPort("n2bport", 0.5f, 0));
                node2.Ports.Add(AddPort("n2cport", 1, 0.5f));
                node2.Ports.Add(AddPort("n2dport", 0.5f, 1));
                FlowShape node3 = CreateNode("node3", FlowShapes.Decision, 120, 60, 550, 205, "Decision");
                node3.Ports.Add(AddPort("n3aport", 0, 0.5f));
                node3.Ports.Add(AddPort("n3bport", 0.5f, 1));
                FlowShape node4 = CreateNode("node4", FlowShapes.Process, 120, 60, 300, 380, "Process");
                node4.Ports.Add(AddPort("n4aport", 0, 0.5f));
                node4.Ports.Add(AddPort("n4bport", 0.5f, 0));
                node4.Ports.Add(AddPort("n4cport", 1, 0.5f));
                node4.Ports.Add(AddPort("n4dport", 0.5f, 1));
                FlowShape node5 = CreateNode("node5", FlowShapes.Terminator, 60, 30, 300, 500, "End");
                node5.Ports.Add(AddPort("n5aport", 0.5f, 0));
                FlowShape node6 = CreateNode("node6", FlowShapes.Decision, 120, 60, 100, 300, "Decision");
                node6.Ports.Add(AddPort("n6aport", 0.5f, 0));
                node6.Ports.Add(AddPort("n6bport", 0.5f, 1));
                FlowShape node7 = CreateNode("node7", FlowShapes.Document, 120, 60, 550, 380, "Decision");
                node7.Ports.Add(AddPort("n7aport", 0.5f, 0));
                node7.Ports.Add(AddPort("n7bport", 0, 0.5f));
    
                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.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)
            {
                Port port = new Port();
                port.Name = name;
                port.Offset = new DiagramPoint(offsetX, offsetY);
                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;
            }
         }
    }