node data in json format

[RakhiS]

Hi,

Currently my node data which I used to display the nodes is by the following code:

[

      {

        //Define unique id for each shape

        id: 'DecisionTZwLH', offsetY: 80, offsetX: 300, annotations: [{ content: 'Start' }], shape: { type: 'Flow', shape: 'Terminator' }

      },

      {

        id: 'Init', offsetY: 150, offsetX: 300, annotations: [{ content: 'Step2' }], shape: { type: 'Flow', shape: 'Process' }

      },

      {

        id: 'Condition', offsetY: 250, offsetX: 300, annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' },

      },

      { id: 'Print', offsetY: 350, offsetX: 300, annotations: [{ content: 'print(\'Hello!!\');' }], shape: { type: 'Flow', shape: 'PreDefinedProcess' } },

      {

        id: 'Increment', offsetY: 450, offsetX: 300, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process' },

      },

      { id: 'End', offsetY: 550, offsetX: 300, annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' }, },

    ];

but I want to get the data from database for which I am using "For JSON Auto" with query in sql. and I am getting result in the following way:

  [{"id":"DecisionTZwLH","offsetY":80,"offsetX":300,"annotations":"[{ content: 'Start'}]","shape":"{ type: 'Flow', shape: 'Terminator '}"},

and when I use this syntax my data is not rendering.

Is there any way in which I can show data using my db generated code?

Please help

[Shyam G]

Hi Rakhi, 

When you retrieve a node data from the database, you should use diagram add method to append a node object in the diagram. Please refer to a help documentation below in which we have show how to add a node object in the diagram. Still, if you face any problem, you can share us a entire JSON object which you retrieve from the server and processing it in the client. 

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/nodes/ 

Regards, 

Shyam G 

[RakhiS]

Hi Shyam, 

Thanks, but my question is different like, as in help documentation, the node is created using <e-nodes> tage. In my case I have used (nodes) property and in that I am getting nodes using 

    [

    {

      //Define unique id for each shape

        id: 'ProcessIs9Xv', offsetY: 80, offsetX: 300, annotations: [{ content: 'Start3' }], shape: { type: 'Flow', shape: 'Terminator' }

    },

    {

      id: 'Init', offsetY: 150, offsetX: 300,annotations: [{ content: 'var i = 0;' }],shape: { type: 'Flow', shape: 'Process' }

    },

    {

      id: 'Condition', offsetY: 250, offsetX: 300,annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' },

    },

    { id: 'Print', offsetY: 350, offsetX: 300, annotations: [{ content: 'print(\'Hello!!\');' }], shape: { type: 'Flow', shape: 'PreDefinedProcess' } },

    {

      id: 'Increment', offsetY: 450, offsetX: 300, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process' },

    },

    {id: 'End', offsetY: 550, offsetX: 300,annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' },},

    ];

This is hardcoded, now myconcern is this, like when I am trying to get the data from sql in json format I am getting this all data in double quotes, and with that the nodes are not displaying. so can you tell me if there is any other way for getting data from db iin json format and render it?

[Shyam G]

Hi Rakhi, 

We will create a sample for your requirement and provide you with more details on 12^th March, 2020. 

Regards, 

Shyam G 

[RakhiS]

Hi Rakhi, 

We will create a sample for your requirement and provide you with more details on 12^th March, 2020. 

Regards, 

Shyam G 

Yes please

Thanks.

[Shyam G]

Hi Rakhi, 

 

We have created a WebAPI(server) and angular(client) sample to achieve your requirement. Please follow the below steps to know how to create a database and retrieve the node JSON from it and render a node in the diagram. 

 

1. We have created a database with table named as DiagramNode and the properties with value shown below.

 

2. We have created a webAPI sample in which we have retrieved the DiagramNode JSON from the database. Please refer to a code example below.

        Code example: 

  //created a database with entity framework  

        public List<DiagramNode> Get() 

        { 

            DiagramEntities4 entity = new DiagramEntities4(); 

            //retrive the diagram node json from the database 

            List<DiagramNode> DiagramNodes = entity.DiagramNodes.ToList<DiagramNode>(); 

            return DiagramNodes; 

        } 

3. We have created a Angular sample in which we have retrieved the DiagramNode JSON from the server using AJAX and render a node in the diagram using add method. Please refer to a code example below.

Code example: 

ngOnInit(): void { 

     const callback: Ajax = new Ajax( 

        'http://localhost:57388/api/entity/Get', 'GET', false, 'application/json; charset=utf-8' 

      ); 

      callback.onSuccess = (JsonString: any): void => { 

        let diagramInstance= this; 

        setTimeout( function () {  

         //get a diagram node from database 

          let parsedData = JSON.parse(JsonString);  

          if(parsedData.length > 0) { 

            //iterate a  node data 

            for(let i = 0; i < parsedData.length; i++) { 

              //create a node 

              let node: NodeModel = { 

                id: parsedData[i].nodeId, offsetX: parsedData[i].offsetX, offsetY: parsedData[i].offsetY, annotations: [{content: parsedData[i].annotationText}], 

                shape: {type: parsedData[i].shapeType, shape:parsedData[i].shapeName} 

              } 

              //add a node in the diagram dynamically using add method. 

              diagramInstance.diagram.add(node); 

            } 

          } 

        },100) 

      }; 

      callback.send().then(); 

  } 

 

Output screenshot: 

 

 

WebAPI sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Webapisample-1633895052 

 

Angular sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angularsample1469569400 

 

Regards, 

Shyam G 

[RakhiS]

Thanks it is working.

[Shyam G]

Hi Rakhi, 

Thanks for your update. 

Regards, 

Shyam G