About Tree View loading and click event in Asp.net Using Javascript

Question

How to load and retreive data in tree View in asp.net using JAVASCRIPT or JQUERY anyone Please help me

Sachin Singh · Answer

follow below approach "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" > "text/javascript" > $(function () { $.ajax({ type: "POST" , url: "Default.aspx/GetTreeData" , data: {}, contentType: "application/json; charset=utf-8" , dataType: "json" , success: function (response) { var nodes = JSON.parse(response.d).nodes; $( '#dvTree' ).treeview({ data: JSON.stringify(nodes) }); }, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }); }); "dvTree" > [WebMethod] public static string GetTreeData() { DataTable dt = new DataTable(); dt.Columns.AddRange( new DataColumn[] { new DataColumn( "Id" ), new DataColumn( "Text" ), new DataColumn( "ParentId" ) }); dt.Rows.Add(1, "IT" , 0); dt.Rows.Add(2, "HR" , 0); dt.Rows.Add(3, "Marketing" , 0); dt.Rows.Add(4, "David" , 1); dt.Rows.Add(5, "Jhon" , 1); dt.Rows.Add(6, "Kevin" , 2); dt.Rows.Add(7, "Marry" , 2); dt.Rows.Add(8, "Robert" , 3); dt.Rows.Add(9, "Andrea" , 6); dt.Rows.Add(10, "Adam" , 8); dt.Rows.Add(11, "Dharmendra" , 4); dt.Rows.Add(12, "Ajeet" , 5); Node nodes = new Node { text = "Department" }; DataView view = new DataView(dt); view.RowFilter = "ParentId=0" ; foreach (DataRowView kvp in view) { string parentId = kvp[ "Id" ].ToString(); Node node = new Node { text = kvp[ "text" ].ToString() }; nodes.nodes.Add(node); AddChildItems(dt, node, parentId); } return ( new JavaScriptSerializer()).Serialize(nodes).Replace( ",\"nodes\":[]" , "" ); } private static void AddChildItems(DataTable dt, Node parentNode, string ParentId) { DataView viewItem = new DataView(dt); viewItem.RowFilter = "ParentId=" + ParentId; foreach (DataRowView childView in viewItem) { Node node = new Node { text = childView[ "text" ].ToString() }; parentNode.nodes.Add(node); string pId = childView[ "Id" ].ToString(); AddChildItems(dt, node, pId); } } public class Node { public Node() { nodes = new List (); } public string id { get; set; } public string text { get; set; } public string icon { get; set; } public List nodes { get; set; } }

About Tree View loading and click event in Asp.net Using Javascript

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)