How to assign a value to a node's addInfo property in Javascript

[Jim Jacobs]

Hi,

I need to assign a value to an addInfo property of a node at runtime from Javascript.
When I drop a certain shape on the canvas, as part of the drop handler I perform an insert into the database and retrieve a key value of the newly inserted record.
I now want to save this key with the node by assigning its value to an addInfo property.

Here's the function that gets called upon completion of my web service call:

function OnSuccess_CreateTask(response, node) {
            if (response.substring(0, 5) == "Error")
                alert('Error creating task in database: ' + response);
            else {
                var addInfo = { NodeDatabaseID: response };
             diagram.updateNode(node.name, { addInfo: addInfo });
                console.log('>> Return from creating a task for node.name = ' + node.name + '  node.addInfo.NodeDatabaseID = ' + node.addInfo.NodeDatabaseID + '  response = ' + response);
                UpdateDiagram(); // Keep diagram in sync with database update
            }
        }

Here's what gets written to the console:

>> Return from creating a task for node.name = ReceiveTaskIcon0x82  node.addInfo.NodeDatabaseID = undefined  response = 154206

As you can see I am getting a key (154206) returned from my web service.
But the addInfo property is undefined.

What am I doing wrong?

Thanks

Jim

[Shyam G]

Hi Jim

Thanks for using Syncfusion products.

Please note that instead of using “updateNode” API, you can assign value directly to the nodes “addInfo” property. Please refer the code snippet below.

Code snippet:

function save() {

var diagram = $("#Diagram1").ejDiagram("instance");

var dict = [];

dict.push({

key: "NodedatabaseId",

value: "154206"

});

diagram.model.nodes[0].addInfo = dict;

var saving = diagram.save()

var stringify = String(JSON.stringify(saving));

PageMethods.save(stringify);

}

Here is the sample:

Sample:http://www.syncfusion.com/downloads/support/forum/118510/WebApplication20_(2)1456199344.zip

Please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

I tried the following based on the code snippet you provided:

function OnSuccess_CreateTask(response, node) {
            if (response.substring(0, 5) == "Error")
                alert('Error creating task in database: ' + response);
            else {
                var dict = [];
                dict.push({
                    key: "NodeDatabaseID ",
                    value: response
                });
                node.addInfo = dict;
                //diagram.model.nodes[0].addInfo = dict;
                console.log('>> Return from creating a task for node.name = ' + node.name + '  node.addInfo.NodeDatabaseID = ' + node.addInfo.NodeDatabaseID + '  response = ' + response);
                UpdateDiagram(); // Keep diagram in sync with database update
            }
        }

I'm still getting "undefined" for node.addInfo.NodeDatabaseID.

Help.

Thanks

Jim

[Shyam G]

Hi Jim

Thanks for the update

Please note that in our previous update we have pushed the JSON data in an array and if you need to get the value from an array, please refer the code snippet below.

Code snippet:

function save() {

var diagram = $("#Diagram1").ejDiagram("instance");

//declare an dictionary object

var dict = [];

dict.push({

key: "NodedatabaseId",

value: "154206"

});

//add the dictionary object to the node addInfo property

diagram.model.nodes[0].addInfo = dict;

//get the dictionary from the node

var dictionary=diagram.model.nodes[0].addInfo[0].key

}

Please note that you can directly assign JSON data to an node’s addInfo property. Please refer the code snippet below

Code snippet :

function save() {

var diagram = $("#Diagram1").ejDiagram("instance");

//declare an dictionary object

var dict = { NodedatabaseId: 154206, Id: 2456 };

//add the dictionary object to the node addInfo property

diagram.model.nodes[0].addInfo = dict;

//get the dictionary value from the node addInfo property

var dictionary = diagram.model.nodes[0].addInfo.Id;

}

Please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

Thanks for the code snippet.
I found I had to modify it as follows, since there will be several addInfo properties that could be set at various places/times in the application.

The following technique will add the property if it doesn't exist, or modify it if it does.
Just in case anyone else is struggling with this.

                var curr_addInfo = node.addInfo;  // Get the current node custom properties
                var extra_addInfo = { 'NodeDatabaseID': response };  // Add (or replace) this property
                var result = $.extend(curr_addInfo, extra_addInfo); // Merge the 2 arrays
                node.addInfo = result; // Place the result back in the addInfo property of the node

Jim

[Shyam G]

Hi Jim

Thanks for the update.

Please note that if two or more arguments are passed to the jQuery $.extend() method, properties from all of the other objects are passed to the target object. If we misunderstood your requirement, could you please share us more details about your requirement such as video or code snippet or screenshot?. This will help us to verify further and provide a better solution to you. Please refer the below link which represents how to use jQuery extend.

Link:

http://api.jquery.com/jquery.extend/

please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

After reading the article for which you provided a link, I have made the following change:

Old:  var result = $.extend(curr_addInfo, extra_addInfo); // Merge the 2 arrays
New: var result = $.extend({}, curr_addInfo, extra_addInfo); // Merge the 2 arrays

Although what I had in place seemed to be working just fine.

To clarify, a user may add a variety off addInfo properties through actions that they take.
Many of these are optional, and could be added in any order and at any time.

What I needed to do was to ensure that any addInfo properties already added were preserved, new ones were added and changes to existing ones were made.  The above technique is accomplishing this for me.

Thanks for your concern.

Jim

[Shyam G]

Hi Jim

Thanks for the update.

Please let us know if you require further assistance on this.

Regards,

Shyam G