dabeng / OrgChart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
MIT License
2.88k stars 771 forks source link

Real world ajax calls to build orgchart ondemand from backend #563

Open mybestpalonline opened 4 years ago

mybestpalonline commented 4 years ago

I am trying to use orgchart at https://github.com/dabeng/OrgChart. It is working fine at static level. I wanted to dynamic load the children using ajax. It has the feature of ondemand available at https://dabeng.github.io/OrgChart/ondemand-loading-data.html but it uses mockjax for mocking the ajax calls. I wanted to have real ajax calls to fetch the data from backend. Unable to do so? Please help.

` $(function () {

    var datasource = <%= GetRoot1() %>;
    var childNodes;
    var ajaxURLs = {
        'children': '/admin/geneology/default.aspx/GetAjaxChildren',
        //'parent': '/orgchart/parent/',
        //'siblings': function (nodeData) {
        //    return '/orgchart/siblings/' + nodeData.id;
        //},
        //'families': function (nodeData) {
        //    return '/orgchart/families/' + nodeData.id;
        //}
    };

    $('#chart-container').orgchart({
        'data': datasource,
        'ajaxURL': ajaxURLs,
        'nodeContent': 'title',
        'nodeId': 'id'
    });
});`
amansadhwani commented 4 years ago

While loading orgchart on demand you have to assign id for each node so when ever you click on children the id of the parent node with get append in your rest call at the end for eg 'children': '/orgchart/children/10',

The 10 at the end is the id of your parent node which get append automatically when you click down arrow key to load children.So accordingly you can make you json for the children