Code sample for server side CRUD operations

[Laurent]

Hi,

I want to do something close to your example :

https://ej2.syncfusion.com/aspnetcore/Diagram/CRUD#/bootstrap

That works fine. But I don't find any information to implement my own methods that will replace your methods:

          

//Define URL to perform CRUD operations with nodes records in database. Read = "https://js.syncfusion.com/demos/ejServices/api/Diagram/GetNodes", Create = "https://js.syncfusion.com/demos/ejServices/api/Diagram/AddNodes", Update = "https://js.syncfusion.com/demos/ejServices/api/Diagram/UpdateNodes", 

Destroy = "https://js.syncfusion.com/demos/ejServices/api/Diagram/DeleteNodes", 

Can you provide me the sample code for the GetNodes/AddNodes/UpdateNodes and deleteNodes method in your example?

Regards,

Laurent Morisseau

[Senthil Kumar Venkatesan]

Hi Laurent , 

 Thanks for reaching syncfusion .  We have attached the controller file below , in that you will have snippets for all the requested methods . You can use that for your reference .  

Kindly revert back to us if you have any further clarifications needed  .  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DiagramController_(1)-2009680140.zip 

  

  

Regards, 

Senthil Kumar V 

[Laurent]

Thanks for your reply.

It doesn't work for me. I have used your example https://ej2.syncfusion.com/aspnetcore/Diagram/CRUD#/bootstrap, added the diagram controller you sent me in your reply, and implementing the class HierarchicalData:

   public class HierarchicalData

    {

        public string Color { get; set; }

        public string Description { get; set; }

        public int Id { get; set; }

        public string Name { get; set; }

    }

I can do some crud actions, but in the crud methods, the argument data is empty, not null but has a count ==0. Nothing is passed in the method:

Thanks for your help,

[Gowtham Gunashekar]

Hi Laurent, 

 

We provided the file for your reference, it demonstrate how we created the our service. You have to create the similar services and need to host in local and remote server. You have to use the service url along with the diagram action. For example if you add a node by using add API you need to call “diagram.insertData()” the required data will up inserted in the service link. We have added a sample to demonstrate the CRUD actions.   

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CRUD-Operation-21240050621838141135  

Documentation Link: https://ej2.syncfusion.com/aspnetcore/documentation/diagram/data-binding/#crud  

 

Regards, 

Gowtham 

[Laurent]

Thanks,

In the same context (Diagram CRUD), I am using a custom context menu. In this context menu, I want an item that simulate the double click event: when I click on the Item, it put the focus on the node  like this :

But I can't work this out. All the custom context menu is ok. Do you have some javascript example?

Thanks a lot,

Laurent

[Senthil Kumar Venkatesan]

Hi Team , 

Programmatically By using startTextEdit method, edit the text through programmatically. We have an event called contextMenu click event using which we can able to call the method inorder to achieve your requirement . We have attached the sample below for your further reference . 

Sample : https://stackblitz.com/edit/jazu7q?file=index.ts 

Documentation link : https://ej2.syncfusion.com/documentation/diagram/labels/#edit 

  

Regards, 

Senthil Kumar V 

[Laurent]

Hi,

Thanks for your answer. It works on a existing node. In my case, the context menu add a new node. In that context (see code below) it doesn't work.

The node and the connector are created in the database via an ajax call. They are added to the diagram in the ajax response:

function addNode(selectedItem, type) {

            const color = getColor(type);

            var description = `New ${type} name`;

            // Call controller to add the new node

            const newNode = {

                Description: description,

                Type: type,

                QuarterId: selectedItem.QuarterId,

                OrganizationId: selectedItem.OrganizationId,

                SourceId: selectedItem.SymuId,

                SourceType: selectedItem.Type

            };

            const jsonNode = JSON.stringify(newNode);

            $.ajax({

                type: "POST",

                url: '/Objective/AddNode',

                data: { json: jsonNode },

                datatype: "text",

                success: function(response) {

                    if (response.success) {

                        const addNodeId = parseInt(response.id);

                        const node = {

                            id: type.substring(0, 1) + addNodeId,

                            style: { fill: color },

                            Description: description,

                            Color: color,

                            SymuId: addNodeId,

                            Type: type,

                            QuarterId: selectedItem.QuarterId,

                            OrganizationId: selectedItem.OrganizationId

                        };

                        const connector = {

                            id: 'connector' + ej.diagrams.randomId(),

                            sourceID: selectedItem.id,

                            targetID: node.id

                        };

                        diagram.add(node);

                        diagram.add(connector);

                        diagram.doLayout();

                        diagram.startTextEdit(node.id);

                    } else {

                        alert('Something went wrong!');

                    }

                }

            });

        }

[Gowtham Gunashekar]

Hi Laurent, 

 

On our further analysis, we found in the shared code, you have set node id as the parameter of the startTextEdit API, but you supposed to set the node object instead of the id. We have added the code snippet to demonstrate how to make a last added node as editable. 

 

Code snippet: 

// remove the following code 

//… 

diagram.startTextEdit(node.id); 

// … 

// add the flowing code 

//…. 

diagram.startTextEdit(diagram.nodes[diagram.nodes.length -1]); 

//…. 

 

 

Regards,  

Gowtham