1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. ASP .NET MVC CORE Using Angular for diagramming tool

ASP .NET MVC CORE Using Angular for diagramming tool

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

9 Replies
SG Shyam G Syncfusion Team January 27, 2020 03:12 PM UTC

Hi Rakhi, 
 
Please find the Getting started documentation to create Angular application using ASP.NET core. 
 
 
Here is an help documentation to get started with diagram control. 
 
 
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: 
 
Adding Css reference 
 
Adding diagram component 
 
 
 
Regards, 
Shyam G 


RA RakhiS January 30, 2020 04:55 AM UTC

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.

RA RakhiS replied to RakhiS January 31, 2020 06:21 AM UTC

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

SG Shyam G Syncfusion Team January 31, 2020 10:22 AM UTC

Hi Rakhi, 
 
We will create a sample for your requirement and update you the sample on 3rd  February, 2020. 
 
Regards, 
Shyam G 


RA RakhiS January 31, 2020 11:02 AM UTC

Ok 

Thanks

RA RakhiS replied to Shyam G February 3, 2020 06:29 AM UTC

Hi Rakhi, 
 
We will create a sample for your requirement and update you the sample on 3rd  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

SG Shyam G Syncfusion Team February 3, 2020 09:22 AM UTC

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: 
  
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); 
    } 
 
 
 
Regards, 
Shyam G 


RA RakhiS February 5, 2020 06:57 AM UTC

Thanks,
It is really helpful


SG Shyam G Syncfusion Team February 6, 2020 04:00 AM UTC

Hi Rakhi, 
Thanks for your update. 
Regards, 
Shyam G 


Loader.
Up arrow icon