Saving datasource about orgchart HOT 20 CLOSED

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

from orgchart.

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
            });
    });

from orgchart.

I think I've got it sorted out :)

from orgchart.

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.

from orgchart.

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

from orgchart.

Hello @JordiCorbilla

could you please share your project details with code samples?

from orgchart.

@JordiCorbilla @dabeng

Please explain how structure is loaded from DB?

from orgchart.

@SuperRooo please, try to do it by yourself

from orgchart.

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

from orgchart.

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.

from orgchart.

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!

from orgchart.

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...

from orgchart.

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

from orgchart.

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
         }
  }
}

from orgchart.

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)
  

from orgchart.

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

from orgchart.

cannot get json data by using gethierarchy function

from orgchart.

please show the code

from orgchart.

it is possible to create using angular 5

from orgchart.

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

from orgchart.