Essential Studio for Asp.Net | Demos

SHOWCASE SAMPLES
Showcase samples
    <%@ Page Title="Diagram-Print And Export-ASP.NET-SYNCFUSION" Language="C#" MetaDescription="This sample demonstrates ASP.NET WEB diagram’s printing and exporting behavior and its customization." MasterPageFile="~/Samplebrowser.Master" AutoEventWireup="true" CodeBehind="PrintAndExport.aspx.cs" Inherits="WebSampleBrowser.Diagram.PrintAndExport" %>
    
    <%@ Register Assembly="Syncfusion.EJ.Web" Namespace="Syncfusion.JavaScript" TagPrefix="ej" %>
    
    <asp:Content runat="server" ID="ControlContent" ContentPlaceHolderID="ControlsSection">
           <div>
              <ej:Toolbar ID="Toolbar1" runat="server" Width="700px" CssClass="toolblock3rightBorderVisible toolcolors">
                <Items>
                    <ej:ToolbarItem Id="text">
                        <Template>
                            <div style="padding:5px">Export As Image: </div>
                        </Template>
                    </ej:ToolbarItem>
                    <ej:ToolbarItem Id="spltbutton">
                        <Template>
                            <div style="padding-top: 3px;padding-right:5px; border-color:#bbbbbb">
                                <ej:SplitButton ID="SplitButton" ClientIDMode="Static" ShowRoundedCorner="true" runat="server" Size="Mini" Height="30px" Text="JPG" ClientSideOnClick="ButtonImg_Click" ClientSideOnItemSelected="ButtonImg_ItemSelect">
                                    <Items>
                                        <ej:SplitItem Id="jpg" Text="JPG"></ej:SplitItem>
                                        <ej:SplitItem Id="png" Text="PNG"></ej:SplitItem>
                                        <ej:SplitItem Id="bmp" Text="BMP"></ej:SplitItem>
                                    </Items>
                                </ej:SplitButton>
                            </div>
                        </Template>
                    </ej:ToolbarItem>
                    <ej:ToolbarItem Id="button1">
                        <Template>
                            <div style="padding-top: 3px;padding-right:2px;margin-left:3px">
                                <ej:Button ID="svgbutton" ShowRoundedCorner="true" Height="30px" Type="Button" runat="server" Width="120px" Text="Export AS SVG" ClientSideOnClick="Buttonsvg_Click"></ej:Button>
                            </div>
                        </Template>
                    </ej:ToolbarItem>
                    <ej:ToolbarItem Id="button2">
                        <Template>
                            <div style="padding-top: 3px;padding-right:2px;margin-left:3px">
                                <ej:Button ID="printbutton" ShowRoundedCorner="true" Height="30px" Type="Button" runat="server" Width="80px" Text="Print" ClientSideOnClick="Buttonprint_Click"></ej:Button>
                            </div>
                        </Template>
                    </ej:ToolbarItem>
                </Items>
            </ej:Toolbar>
        </div>
        <div>
            <ej:Diagram ClientIDMode="Static" ID="DiagramWebControl1" runat="server" Height="400px" Width="850px">
                <PageSettings ScrollLimit="Diagram" />
                <SnapSettings SnapConstraints="None" />
            </ej:Diagram>
        </div>
            
        
    </asp:Content>
    <asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptSection">
        <script type="text/javascript">
            function ButtonImg_Click(args) {
                var diagram = $("#DiagramWebControl1").ejDiagram("instance");
                diagram.exportDiagram({ format: args.text });
            }
            function ButtonImg_ItemSelect(args) {
                $("#SplitButton").ejSplitButton({ text: args.text });
                var diagram = $("#DiagramWebControl1").ejDiagram("instance");
                diagram.exportDiagram({ format: args.ID });
            }
            function Buttonsvg_Click(args) {
                var diagram = $("#DiagramWebControl1").ejDiagram("instance");
                diagram.exportDiagram({
                    fileName: "diagram",
                    mode: "download",
                    format: "svg"
                });
            }
            function Buttonprint_Click(args) {
                var diagram = $("#DiagramWebControl1").ejDiagram("instance");
                diagram.print({
                    pageOrientation:"landscape"
                });
            }
        </script>
    </asp:Content>
    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="StyleSection">
        <style type="text/css">
            .toolcolors {
                border-bottom-color: #bbbbbb;
                background-color: #ebeced;
                border-top-style: none;
                border-left-style: none;
                border-right-style: none;
                border-width: 1px;
            }
    
            .e-toolbar > .e-horizontal .e-hover, .e-toolbar > .e-vertical > .e-hover,
            .e-toolbar > .e-horizontal .e-active, .e-toolbar > .e-vertical > .e-active {
                background: transparent;
                border-color: transparent;
            }
    
            .e-toolbar > .e-horizontal > .e-active > div {
                color: black;
            }
            .e-btn.e-select {
                background: #fcfcfc;
                color: #333;
                border-color: #cecece;
            }
        </style>
    </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 PrintAndExport : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                BPMNNode node = CreateBPMN("node1", BPMNShapes.Event, 60, 60, 55, 200, "Select Support Ticket");
                node.Event = BPMNEvents.Start;
    
                CreateBPMN("node2", BPMNShapes.Activity, 75, 70, 190, 200, "Handle Support Ticket");
                node.Activity = BPMNActivity.Task;
                node = CreateBPMN("node3", BPMNShapes.Gateway, 75, 70, 355, 200, "");
                node.Gateway = BPMNGateways.Exclusive;
    
                node = CreateBPMN("node4", BPMNShapes.Activity, 75, 70, 530, 90, "Respond to customer");
                node.Activity = BPMNActivity.Task;
                node.Task.Type = BPMNTasks.Service;
    
                node = CreateBPMN("node5", BPMNShapes.Activity, 75, 70, 530, 200, "Close ticket");
                node.Activity = BPMNActivity.Task;
                node.Task.Type = BPMNTasks.Service;
    
                node = CreateBPMN("node6", BPMNShapes.Activity, 75, 70, 530, 300, "Escalate ticket");
                node.Activity = BPMNActivity.Task;
                node.Task.Type = BPMNTasks.Service;
    
                node = CreateBPMN("node7", BPMNShapes.Event, 60, 60, 660, 90, "");
                node.Event = BPMNEvents.End;
    
                node = CreateBPMN("node8", BPMNShapes.Event, 60, 60, 660, 200, "");
                node.Event = BPMNEvents.End;
    
                node = CreateBPMN("node9", BPMNShapes.Event, 60, 60, 660, 300, "");
                node.Event = BPMNEvents.End;
    
                ConnNode(DiagramWebControl1.Connectors, "node1", "node2");
    
                ConnNode(DiagramWebControl1.Connectors, "node2", "node3");
    
                Collection segments = new Collection() { 
                    new Segment(){Type=Segments.Orthogonal, Length=75, Direction="top"},
                    new Segment(){Type=Segments.Orthogonal, Length=80, Direction="right"},
                };
                Label label = new Label() { Text = "Respond", FillColor = "white", Wrapping = TextWrapping.Wrap };
    
                ConnNode(DiagramWebControl1.Connectors, "node3", "node4", segments, label);
    
                segments = new Collection() { 
                    new Segment(){Type=Segments.Orthogonal, Length=75, Direction="right"},
                };
                label = new Label() { Text = "Close", FillColor = "white", Wrapping = TextWrapping.Wrap };
                ConnNode(DiagramWebControl1.Connectors, "node3", "node5", segments, label);
    
                segments = new Collection() { 
                    new Segment(){Type=Segments.Orthogonal, Length=65, Direction="bottom"},
                    new Segment(){Type=Segments.Orthogonal, Length=75, Direction="right"},
                };
                label = new Label() { Text = "Escalate", FillColor = "white" };
                ConnNode(DiagramWebControl1.Connectors, "node3", "node6", segments, label);
    
                ConnNode(DiagramWebControl1.Connectors, "node4", "node7");
                ConnNode(DiagramWebControl1.Connectors, "node5", "node8");
                ConnNode(DiagramWebControl1.Connectors, "node6", "node9");
    
            }
            private BPMNNode CreateBPMN(String name, BPMNShapes shape, double width, double height, double offsetx, double offsety, string text = "")
            {
                BPMNNode node = new BPMNNode();
                node.Name = name;
                node.Shape = shape;
                node.Width = width;
                node.Height = height;
                node.OffsetX = offsetx;
                node.OffsetY = offsety;
                Label label = new Label();
                label.Text = text;
                label.FontColor = "black";
                if (shape == BPMNShapes.Event && shape == BPMNShapes.Activity && text != "")
                {
                    label.Offset = new DiagramPoint() { Y = 1 };
                    label.VerticalAlignment = VerticalAlignment.Top;
                }
                else label.Offset = new DiagramPoint() { Y = 0.5f };
                node.Labels.Add(label);
                DiagramWebControl1.Nodes.Add(node);
                return node;
            }
            private void ConnNode(Collection nodes, string sourceNode, string targetNode, Collection segments = null, Label label = null)
            {
                Connector connector = new Connector();
                connector.TargetNode = targetNode;
                connector.SourceNode = sourceNode;
                if (label != null)
                {
                    label.FillColor = "white";
                    connector.Labels = new Collection() { label };
                }
                if (segments == null) segments = new Collection() { new Segment() { Type = Segments.Orthogonal } };
                connector.Segments = segments;
                DiagramWebControl1.Connectors.Add(connector);
            }
        }
    }