Home » Jquery » javascript – how to use OrgChart.JS( BalkanGraph )with sql server in asp.net web forms?

javascript – how to use OrgChart.JS( BalkanGraph )with sql server in asp.net web forms?

Posted by: admin February 22, 2020 Leave a comment

Questions:

I am working on a web forms project which contains an organizational chart, I used orgchart.js as a (balkangraph) library, when I generate my project I don’t recover my nodes, my problem is that I don’t know how to display my list of data in java script, i used ajax as you see in my source code, does anyone have any idea how i can recover my data? or how can I link my nodes to my database?

here mon code aspx:

<form id="form1" runat="server">
            <asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />
            <div id="tree">
            </div>
            </form>


            <script >
                var chart = new OrgChart(document.getElementById("tree"), {
                    nodeBinding: {
                        field_0: "UO",
                        field_1:"Uo_Rattachement"
                    },
                    menu: {
                        pdf: { text: "Export PDF" },
                        png: { text: "Export PNG" },
                        svg: { text: "Export SVG" },
                        csv: { text: "Export CSV" }
                    },
                    nodeContextMenu: {
                        edit: { text: "Edit", icon: OrgChart.icon.edit(18, 18, '#039BE5') },
                        add: { text: "Add", icon: OrgChart.icon.add(18, 18, '#FF8304') }
                    },


                    nodeMenu: {
                        details: { text: "Details" },
                        edit: { text: "Edit" },
                        add: { text: "Add" },

                        remove: { text: "Remove" }
                    },

                });
                chart.on('ReadData', function (sender, n)  {
                    $.ajax({
                        url: 'WebForm1.aspx.cs/ReadData',
                        type: 'POST',
                        data: JSON.stringify(n),
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (ReadData) {
                            var data = ReadData.d;
                            for (var i in data) {
                                alert(JSON.stringify(data[i]));
                            }

                    });
                });
                chart.on('add', function (sender, n) {
                    $.ajax({
                        type: 'POST',
                        url: 'WebForm1.aspx.cs/Add',
                        data: JSON.stringify(n),
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json'
            });
        });
                chart.on('remove', function (sender, uo) {
                    $.ajax({
                        type: 'POST',
                        url: 'WebForm1.aspx.cs/Remove',
                data: JSON.stringify({ uo: uo }),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            });
        });
                chart.on('update', function (sender, oldNode, newNode) {
                    $.ajax({
                        type: 'POST',
                        url: 'WebForm1.aspx.cs/Update',
                data: JSON.stringify({ oldNode: oldNode, newNode: newNode }),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
                    });

                });

                chart.load(<%= Session["Nodes"] %>);


                    document.getElementById("selectTemplate").addEventListener("change", function () {
                        chart.config.template = this.value;
                        chart.draw();

                });

    </script>

mon code source aspx.cs:

 protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
            if (Session["Nodes"] == null)
            {

                var jsonSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();

                List<Node> list = new List<Node>();
                list.Add(new Node
                {
                    uo = "1",
                    lib_reduit = "Name 1"
                });

                Session["Nodes"] = jsonSerialization.Serialize(list);

    }
        }
    }

    public List<Node> ReadData()
    {
        SqlConnection conn = new SqlConnection("Data Source=OUMAIMA-PC\SQLEXPRESS;Initial Catalog=AGIRH;Integrated Security=True");
        string query = "SELECT uo,uo_rattachement,lib_reduit FROM UNITE_ORG ";
        List<Node> list = new List<Node>();

            SqlCommand cmd = new SqlCommand(query, conn);
            conn.Open();
            SqlDataReader dataReader = cmd.ExecuteReader();
            while (dataReader.Read())
            {
                list.Add(new Node
                {
                    uo = dataReader.GetString(0),
                    uo_rattachement = dataReader.GetString(1),
                    lib_reduit = dataReader.GetString(2)
                });
            }
            dataReader.Close();
            conn.Close();
        return list;

    }
    public static void Add(string uo, string uo_rattachement, string lib_reduit)
    {
        var jsonSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();
        var list = jsonSerialization.Deserialize<List<Node>>((string)HttpContext.Current.Session["Nodes"]);
        list.Add(new Node
        {
            uo = uo,
            uo_rattachement = uo_rattachement,
            lib_reduit = lib_reduit
        });
        HttpContext.Current.Session["Nodes"] = jsonSerialization.Serialize(list);
    }

    public static void Remove(string uo)
    {
        var jsonSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();
        var list = jsonSerialization.Deserialize<List<Node>>((string)HttpContext.Current.Session["Nodes"]);
        Node removeItem = null;
        foreach (var item in list)
        {
            if (item.uo == uo)
            {
                removeItem = item;
                break;
            }
        }
        list.Remove(removeItem);
        HttpContext.Current.Session["Nodes"] = jsonSerialization.Serialize(list);
    }

    public static void Update(Node oldNode, Node newNode)
    {
        var jsonSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();
        var list = jsonSerialization.Deserialize<List<Node>>((string)HttpContext.Current.Session["Nodes"]);
        foreach (var item in list)
        {
            if (item.uo == newNode.uo)
            {
                item.uo_rattachement = newNode.uo_rattachement;
                item.lib_reduit = newNode.lib_reduit;
                break;
            }
        }
        HttpContext.Current.Session["Nodes"] = jsonSerialization.Serialize(list);
    }

this photo shows the result, I need to display my organization chart :

enter image description here

How to&Answer: