Add an image node at server side

Hi,

I am trying to add an image node at server side. I have tried two ways to acheive that.

First way, in html:

<ejs-diagram width="100%" height="100%" >

     <e-diagram-nodes>

                  <e-diagram-node id="1" offsetX="500" offsetY="100" width="200" height="125" >

                        <e-node-shape type="Image" source=" ../img/diagram/image.png"></e-node-shape>

                    </e-diagram-node>

</e-diagram-nodes>

</ejs-diagram>

=> Nothing is displayed in the diagram

Second way, in controller:

in HTML : <ejs-diagram width="100%" height="100%" nodes="@ViewBag.Nodes">

in Controller:  

List<DiagramNode> nodes = new List<DiagramNode>();

var objective = new DiagramNode{

                        Id = "0",

                        OffsetX = 500,

                        OffsetY = 100,

                        Width = 200,

                        Height = 125,

                        Shape= new ImageShape()

                        {

                            Type= Shapes.Image,

                            Source= "../img/diagram/image.png"

                        }

                    };

                    nodes.Add(objective);

                    ViewBag.Nodes = nodes;

public  struct ImageShape => I create this struct because it that doesn't exists

        {

            public Shapes Type { get; set; }

            public string Source { get; set; }

        }

=> The node is dispayed but not the image.


Can you see what I am doing wrong in both cases?


Regards,

Laurent


1 Reply

SG Shyam G Syncfusion Team January 5, 2022 01:42 PM UTC

Hi Laurent,


We have created a sample with the image node and provided the sample link below.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/imagenode-331038767


Please refer to a documentation below for more details.


https://ej2.syncfusion.com/aspnetcore/documentation/diagram/shapes/#image


Regards,

Shyam G


Loader.
Up arrow icon