ASP .NET MVC CORE Using Angular for diagramming tool

[RakhiS]

Hi,

We are in need to buy diagramming tool using syncfusion for that we are trying to create simple nodes and connecter, but I didn't find any step to step tutorial or video to configure in ASP.NET MVC Core using Angular for this. Kindly help me out into this by sharing a tutorial/Video in which all the steps  are defined.

Thanks

[Shyam G]

Hi Rakhi, 

 

Please find the Getting started documentation to create Angular application using ASP.NET core. 

 

Getting started: https://ej2.syncfusion.com/angular/documentation/getting-started/aspnet-core/?no-cache=1 

 

Here is an help documentation to get started with diagram control. 

 

Diagram: https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/?no-cache=1 

 

Also, please find the below to create Angular application in ASP.NET core. 

 

Create an application

1.      1.  Choose File > New > Project in the visual studio menu bar. 

2.      2. Select Installed > Visual C# > .NET Core and choose the required .NET Framework in the drop-down. 

3.      3. Select ASP.NET Core Web Application and change the application name, and then click OK. 

4.      4. Select Angular and then click OK. The application is created. 

 

Installing Syncfusion Diagram package

Move to the Client-App folder to install the Syncfusion package. 

cd ClientAppnpm install

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the angular Syncfusion packages from the npm link. 

Add the syncfusion angular packages to the application which needs to be run. For example we have add the syncfusion angular grid packages to the application. 

npm install @syncfusion/ej2-angular-diagrams --save(or)npm I @syncfusion/ej2-angular-diagrams --save

 

Register diagram module: 

https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/?no-cache=1#registering-diagram-module 

 

Adding Css reference 

https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/?no-cache=1#adding-css-reference 

 

Adding diagram component 

https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/?no-cache=1#add-diagram-component 

 

 

 

Regards, 

Shyam G 

[RakhiS]

Thanks Shyam,

But my requirement is to show all the nodes with  there shapas and connecters, from where end user can create their diagram with themselves, also how can I get the unique ids of the nodes when it is drag into the diagram part, I want to save the node which is created into database so need its id, labels(texts). If it is connected then need the id of the connecter, source node , destination node among which the connecter is connected, in this way... Please help.

[RakhiS]

Thanks Shyam,

But my requirement is to show all the nodes with  there shapas and connecters, from where end user can create their diagram with themselves, also how can I get the unique ids of the nodes when it is drag into the diagram part, I want to save the node which is created into database so need its id, labels(texts). If it is connected then need the id of the connecter, source node , destination node among which the connecter is connected, in this way... Please help.

please reply for the same

[Shyam G]

Hi Rakhi, 

 

We will create a sample for your requirement and update you the sample on 3^rd  February, 2020. 

 

Regards, 

Shyam G 

[RakhiS]

Ok 

Thanks

[RakhiS]

Hi Rakhi, 

 

We will create a sample for your requirement and update you the sample on 3^rd  February, 2020. 

 

Regards, 

Shyam G 

Hi,

How can I get the element type on doubleclick event? I want to know if it is node or connecter or double clicked on somewhere else. Please help

[Shyam G]

Hi Rakhi, 

 

Query	Response
But my requirement is to show all the nodes with  there shapas and connecters, from where end user can create their diagram with themselves, also how can I get the unique ids of the nodes when it is drag into the diagram part, I want to save the node which is created into database so need its id, labels(texts). If it is connected then need the id of the connecter, source node , destination node among which the connecter is connected, in this way... Please help.	Drag and drop a node into the diagram from the symbol palette    When you drag a node from the symbol palette and drop it into the diagram, the CollectionChange event gets triggered. In this event, you will get a newly added object in the arguments element property and you can customize the new node in this event. Please refer to a code example and the sample below.    Code example:  <ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]="nodes" [connectors]="connectors" (collectionChange)="collectionChange($event)" (doubleClick)="doubleClick($event)">      </ejs-diagram>    collectionChange(args: ICollectionChangeEventArgs) {          if (args.state === 'Changed') {              //args element property returns newly added object              console.log(args.element);          }       }      Save the node with specific property.    Please use our saveDiagram method which returns the diagram model properties JSON. In that JSON, we get the nodes and connectors collection and iterate it. After, you should get the required node and connector property and push it into the separate collection.    Next, we should send that collection as a JSON string from client to the server side using AJAX. We can parse that to Diagram Node and Connector in the server side and save it into the database with your field defined in it.    We have created a sample to achieve your requirement. Please refer to a code example below.    Code example:  Home.component.ts     saveDiagram(): void {          let nodePropertyCollection = [];          let connectorPropertyCollection = [];          //save the diagram          let saveData = this.diagram.saveDiagram();          //parse the JSON string          let parsedData = JSON.parse(saveData);          //iterate the nodes          for (let i: number = 0; i < parsedData.nodes.length; i++) {              let node: NodeModel = parsedData.nodes[i];              nodePropertyCollection.push({ id: node.id, text: node.annotations[0].content });          }          //iterate the connectors          for (let j: number = 0; j < parsedData.connectors.length; j++) {              let connector: ConnectorModel = parsedData.connectors[j];              connectorPropertyCollection.push({ id: connector.id, sourceID: connector.sourceID, targetID: connector.targetID });          }          let jsonResult: any = {  nodeProperty: nodePropertyCollection, connectorProperty: connectorPropertyCollection };          // ajax to send html data to server side          const callback: Ajax = new Ajax(              'https://localhost:44323/api/Diagram/saveDiagram', 'POST', false, 'application/json; charset=utf-8'          );          let contentData: string = JSON.stringify(jsonResult);          callback.onSuccess = (data: string): void => {                         }          callback.send(contentData).then();       }    Diagramcontroller.cs       [HttpPost]          public void saveDiagram(Dictionary<string, object> NCProperty)          {              //parse a node collection              List<DiagramNode> Nodes = JsonConvert.DeserializeObject<List<DiagramNode>>(NCProperty["nodeProperty"].ToString());              foreach (var node in Nodes)              {                  // process each node                  string id = node.Id;              }              //To get connectors collection              List<DiagramConnector> Connectors = JsonConvert.DeserializeObject<List<DiagramConnector>>(NCProperty["connectorProperty"].ToString());              //Iterate an connectors              foreach (var connector in Connectors)              {                  // process each connector                  string id = connector.Id;              }           }
How can I get the element type on doubleclick event? I want to know if it is node or connecter or double clicked on somewhere else. Please help	When we double click on a node/connector, we get a node/connector object in the arguments source property. Please refer to a code example and the sample below.    Code example:  <ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]="nodes" [connectors]="connectors" (collectionChange)="collectionChange($event)" (doubleClick)="doubleClick($event)">      </ejs-diagram>      doubleClick(args: IDoubleClickEventArgs) {          console.log(args.source);      }

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AngularSampleASPCore-1992553730 

 

Regards, 

Shyam G 

[RakhiS]

Thanks,

It is really helpful

[Shyam G]

Hi Rakhi, 

Thanks for your update. 

Regards, 

Shyam G