Node in ASP.NET Webforms Diagram

19 Oct 202214 minutes to read

Nodes are graphical object that represent visual data to be placed on the page.

Diagram node

Create Node

A node can be created and added to the Diagram, either programmatically or interactively. Nodes are stacked on the Diagram area from bottom to top in the order they are added.

Add node through nodes collection

To create a node, You have to create the node tag and add that to Nodes collection of the Diagram Model. The following code example illustrates how to add a node to the Diagram.

  • ASPX-CS
  • <%--Initializes Diagram--%>
            <ej:Diagram ID="Diagram" runat="server" Height="600px" Width="1000px">
                <Nodes>
                    <%--  Sets the Name, size ,position of the nodes --%>            
                    <ej:BasicShape Height="100" Width="100" OffsetX="100" OffsetY="100" FillColor="darkcyan" BorderWidth="2">
                    </ej:BasicShape>
                </Nodes>
            </ej:Diagram>

    add a node to the Diagram

    Add node at runtime

    Nodes can be added at runtime by using public method, add. The following code illustrates how to add a node.

  • JS
  • // Defines JSON to create a node
        var node = {
            name: "node1",
            width: 100,
            height: 100,
    
            //Sets position
            offsetX: 250,
            offsetY: 250,
            fillColor: "darkcyan",
            borderWidth: 2
        };
    
        var diagram = $("#diagram").ejDiagram("instance");
    
        // Adds node to the Diagram
        diagram.add(node);

    add a node at run time

    Add node from palette

    Nodes can be predefined and added to palette and can be dropped into the Diagram when needed. For more information about adding nodes from symbol palette, refer to Symbol Palette.

    Create node through data source

    Nodes can be generated automatically with the information provided through data source. The default properties for these nodes are fetched from default settings. For more information about data source, refer to Data Binding.

    Draw nodes

    Nodes can be interactively drawn by clicking and dragging the Diagram surface by using DrawingTool. For more information about drawing nodes, refer to Draw Nodes.

    Update Node at runtime

    The client side method updateNode is used to update the nodes at run time. The following code example illustrates how to update a node at runtime.

  • JS
  • var diagram = $("#DiagramContent").ejDiagram("instance");
        diagram.updateNode("nodeName", {
            fillColor: "#1BA0E2",
            borderWidth: 5,
            borderColor: "#000000"
        })

    Position

    Position of a node is controlled by using its OffsetX and OffsetY properties. By default, these offset properties represent the distance between origin of the Diagram’s page and node’s center point. You may expect this Offset values to represent the distance between page origin and node’s top left corner instead of center. Pivot property helps solve this problem. Default value of node’s Pivot point is (0.5, 0.5), that means center of Node.

    The following table illustrates how pivot relates offset values with node boundaries.

    Pivot Offset
    (0.5,0.5) OffsetX and OffsetY values are considered as the node’s center point.
    (0,0) OffsetX and OffsetY values are considered as the top left corner of node
    (1,1) OffsetX and OffsetY values are considered as the bottom right corner of the node.

    The following code illustrates how to change the Pivot value.

  • ASPX-CS
  • <%--Initializes Diagram--%>
            <ej:Diagram ID="Diagram" runat="server" Height="600px" Width="900px">
                <Nodes>
                    <ej:BasicShape Height="100" Width="100" OffsetX="100" OffsetY="100" FillColor="darkcyan" BorderWidth="2">
                        <%--  Sets pivot point --%>
                        <Pivot X="0" Y="0"></Pivot>
                    </ej:BasicShape>
                </Nodes>
            </ej:Diagram>

    pivot relates offset values with node boundaries

    Types

    Diagram allows to add different kind of nodes. To explore the types of nodes, refer to Types of Nodes.

    Appearance

    You can customize the appearance of a node by changing its fill colors, patterns, line weight and style, or shadow. The following code illustrates how to customize the appearance of the shape.

  • ASPX-CS
  • <%--   Initializes Diagram--%>
            <ej:Diagram ID="Diagram" runat="server" Height="600px" Width="900px">
                <Nodes>
                    <%--  Sets styles to a node to customize the appearance --%>
                    <ej:BasicShape Height="100" Width="100" OffsetX="100" OffsetY="100" FillColor="darkcyan" BorderColor="black" BorderDashArray="5,5" BorderWidth="2">
                    </ej:BasicShape>
                </Nodes>
            </ej:Diagram>

    customize the appearance of the shape

    Gradient

    There are two types of gradients.

    • Linear gradient - Defines a smooth transition between a set of colors (so-called “stops”) on a line.
    • Radial gradient - Defines a smooth transition between stops on a circle.

    The Gradient property of Node allows you to define and applies the gradient effect to that node.

  • C#
  • BasicShape Node = new BasicShape();
                Node.Name = "node1";
                Node.Width = 100;
                Node.Height = 100;
                Node.OffsetX = 100;
                Node.OffsetY = 100;
                //Initialize the radial gradient
                RadialGradient Radial = new RadialGradient();
                Radial.CX = 50;
                Radial.CY = 50;
                Radial.FX = 50;
                Radial.FY = 50;
                //Initialize the stops
                Collection Stops = new Collection();
                Stop Stop = new Stop();
                Stop.Color = "white";
                Stop.Offset = 0;
                Stops.Add(Stop);
                Stop = new Stop();
                Stop.Color = "darkCyan";
                Stop.Offset = 100;
                Stops.Add(Stop);
                Radial.Stops = Stops;
                
                //Initialize the linear gradient
                LinearGradient Linear = new LinearGradient();
                Linear.X1 = 0;
                Linear.X2 = 50;
                Linear.Y1 = 0;
                Linear.Y2 = 50;
                //Initialize the stops
                Stops = new Collection();
                Stop = new Stop();
                Stop.Color = "white";
                Stop.Offset = 0;
                Stops.Add(Stop);
                Stop = new Stop();
                Stop.Color = "darkCyan";
                Stop.Offset = 100;
                Stops.Add(Stop);
                Linear.Stops = Stops;
                
                //Sets the node gradient as linear gradient
                Node.Gradient = Linear;
                Model.Nodes.Add(Node);

    the gradient effect to that node

    Shadow

    Diagram provides support to add shadow effect to a node that is disabled by default. It can be enabled with the Constraints property of node. The following code illustrates how to drop shadow.

  • ASPX-CS
  • <%--   Initializes Diagram--%>
            <ej:Diagram ID="Diagram" runat="server" Height="600px" Width="900px">
                <Nodes>
                    <%--  Enables Shadow effect for a node. --%>
                    <ej:BasicShape Height="100" Width="100" OffsetX="100" OffsetY="100" Constraints="Default,Shadow">
                    </ej:BasicShape>
                </Nodes>
            </ej:Diagram>

    add shadow effect to a node

    The following code illustrates how to disable shadow effect at runtime.

  • JS
  • var diagram = $("#diagram").ejDiagram("instance");
        var node = diagram.findNode("node");
        var nodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
    
        //Disables Shadow effect for a node.
        constraints = node.constraints & ~nodeConstraints.Shadow;
        diagram.updateNode("node", { constraints: constraints });

    Customizing Shadow

    The angle, translation, and opacity of the Shadow can be customized with the Shadow property of node. The following code example illustrates how to customize shadow.

  • ASPX-CS
  • <%--   Initializes Diagram--%>
            <ej:Diagram ID="Diagram" runat="server" Height="600px" Width="900px">
                <Nodes>
                    <%--  Enables Shadow effect for a node. --%>
                    <ej:BasicShape Height="100" Width="100" OffsetX="100" OffsetY="100" Constraints="Default,Shadow">
                        <%--  Customize the Node's Shadow effect. --%>
                        <Shadow Opacity=".8" Angle="50" Distance="9"></Shadow>
                    </ej:BasicShape>
                </Nodes>
            </ej:Diagram>

    customize shadow

    Interaction

    Diagram provides support to drag, resize, or rotate the node interactively. For more information about editing a node at runtime, refer to Edit Nodes.

    Constraints

    The Constraints property of node allows you to enable/disable certain features. For more information about node constraints, refer to Node Constraints.