Saving datasource

[JordiCorbilla]

Hi there,

I'm loading my Json string with my hierarchy but after modifying the hierarchy, I want to save it so I can reopen the changes. How can I get the modified datasource from the chart?

Regards,
Jordi

[JordiCorbilla]

I think I've got it sorted out :)

[dabeng]

Hi @JordiCorbilla , sorry for late response. Congratulates you on finding your own solution.

If i got this demand, I think I will make the use of getHierarchy method to retrieve all the necessary data and then send them to back-end.

[dabeng]

Hi @JordiCorbilla . could you share your basic implementation idea for saving datasource? I guess there must be some orgchart users face the same demand.

[JordiCorbilla]

Hi @dabeng,

Sure, I'm still working on it but I got it working. I'm loading the tree from a DB and then I'm using the getHierarchy method to get the structure. Then I parse that data and build my update sql with the ids. Quite easy and simple. I'll do the changes on my fork.

Example (structure is loaded from DB and Saved to DB):

Jordi

[SuperRooo]

Hello @JordiCorbilla

could you please share your project details with code samples?

[SuperRooo]

@JordiCorbilla @dabeng

Please explain how structure is loaded from DB?

[joakku]

@SuperRooo please, try to do it by yourself

[JordiCorbilla]

Hi @SuperRooo, I think that the KnowHow will have to be done by yourself. I've got it working using the tools @dabeng provided via the OrgChart which is brilliant. So you'll have to explore how to get the data from the Db and how to save it back.

To give a bit of an example, I store my tree in the DB and I configure the position of the nodes via Parent property:

Id User Parent
1 u1 -1
2 u2 1
3 u3 1

So this will be represented as:

Then when building the chart, you need to send those Id as part of the structure and then when you modify the OrgChart, get the JSON the is available via getHierarchy and process it to obtain the new positions. Then send it to wherever you process this (in my case a controller as I'm using MVC for this) and the do the updates to that table so the new organisation is stored.

I hope this helps.

Cheers,
Jordi

[SahuGajendraK]

Hi @JordiCorbilla can you please share the sample code how you read the datasource after making a changes to it using drag and drop. We tried to read it using GetHierarchy but the value of data-parent is not changing.

[JordiCorbilla]

Hi @GajendraBanctec,

It is changing for me. Are you populating correctly the IDs in the structure? Because what I do later is just parsing the json structure and sending it back to my controller to save the new layout.

So my code does something like that:

$('#btn-export-hier').on('click', function () {
        $('pre').empty();
            var hierarchy = $('#chart-container').orgchart('getHierarchy');
            var tree = JSON.stringify(hierarchy, null, 2);
            $.ajax({
                type: "POST",
                url: "http://mySite/SaveData?tree=" + tree,
                success: function (data) {
                },
                dataType: "json",
                traditional: true
            });
    });

[akumar999]

Hi JordiCorbilla,

Thankyou for this implementation and it was a great help. But I am trying to modify the script so that the exported updated data types are similar to the input data types ex: like "name":"sampleNode" , "queuename":"sampleQueue" instead of "id":"1456709090909"

I made all required changes but stil it do not work, can you give me some pointer?

Thankyou in advance!

[GeekWiinik]

Hi JordiCorbilla, I'm in the same road, but i cant parse the json from getHierarchy, i have tried with array_walk_recursive and other functions, but i lost the parent id, i can't make the relation parent->children, could you share your function to parse? Maybe i can get an idea...

[GeekWiinik]

Well i come to this solution
https://stackoverflow.com/questions/46303677/update-database-from-orgchart-json/46306604#46306604

[JordiCorbilla]

Hi @GeekWiinik,

If you see few comments above you'll see that I'm using:

var tree = JSON.stringify(hierarchy, null, 2);

Ajax url call:
url: "http://localhost/OrganizationWeb/Home/SaveData?tree=" + tree,

to get the tree in a string format.

Then the controller has a method that consumes this string and parses it to get the details it needs.
The example below uses a list of commands where I build the update sql statements with the new Ids to be updated in the DB.

public ActionResult SaveData(string tree)
{
            dynamic stuff = JObject.Parse(tree);

            List<string> commands = new List<string>();
            parseTree(commands, stuff); 
}

public void parseTree(List<string> commands, dynamic stuff)
{
  if (stuff.children != null)
   {
         foreach (var s in stuff.children)
         {
              //do your thing with stuff.id and s.id values
              parseTree(commands, s); //keep traversing the tree recursively
         }
  }
}

[kamran1]

Hi @JordiCorbilla ,
when try to save the data with above mention method getting exception

ncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at HTMLButtonElement.<anonymous> (organogram:149)
    at HTMLButtonElement.dispatch (jquery-3.2.1.min.js:3)
    at HTMLButtonElement.q.handle (jquery-3.2.1.min.js:3)
  

[IvonElroiAdelantar]

@JordiCorbilla Hi can you please share the project. Thank you!

[Billa096]

cannot get json data by using gethierarchy function

[bharat44]

please show the code

[bharat44]

it is possible to create using angular 5

[buxiangshuohua]

谢谢 thank you ありがとうございました