i'm try to create organization chart using orgchart jquery dynamically, I tried some coding process with is not displaying organization chart. I could not find any error. can someone help me to construct orgchart using jquery dynamicaly(sqlserver config back end).

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta charset="utf-8">
    <title>Organization chart</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/FortAwesome/Font-Awesome/master/css/font-awesome.min.css">
    <link rel="stylesheet" href="jquery.orgchart.css">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/jakerella/jquery-mockjax/master/dist/jquery.mockjax.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.orgchart.js"></script>
</head>
<body>
    <div id="chart-container">
    </div>
</body>
<script type="text/javascript">
    var datasource = [];
    (function ($) {

        $(function () {

            $.ajax({
                type: "POST",
                url: "../org/dynorg.aspx/getOrg_details",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    data = data.d;
                    for (i = 0; i < data.length; i++) {
                        datasource[i] = {
                            'id': data[i]["id"],
                            'name': data[i]["designation"],
                            'parent': data[i]["parent_id"]
                        };

                    }
                }
            });

//            var ajaxURLs = {
//                'children': '/path/to/children/',
//                'parent': '/path/to/parent/',
//                'siblings': '/path/to/siblings/',
//                'families': '/path/to/families/'
//            };
            $('#chart-container').orgchart({
                'data': datasource,
                'depth': 2,
                'nodeContent': 'name',
                'nodeId': 'id'
            });

        });

    })(jQuery);


</script>
</html>

   #region Getdetails
[WebMethod]
public static List<org_data> getOrg_details()
{
   List<org_data> items = new List<org_data>();
   orgcls orgBo = new orgcls();
   DataSet ds = orgBo.getDataTable();
   if (ds.Tables[0].Rows.Count > 0)
   {
       for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
       {
           org_data item = new org_data();
           item.id = Convert.ToString(ds.Tables[0].Rows[i]["id"]);
           item.parent_id = Convert.ToString(ds.Tables[0].Rows[i]["parent_id"]);
           item.designation = Convert.ToString(ds.Tables[0].Rows[i]["designation"]);
           items.Add(item);
        }
    }
   return items;
}

Related posts

Recent Viewed