how to load treeview in asp.net using javascript with no aspx.cs file.

Question

how to load treeview in asp.net using javascript with no behind code in aspx.cs file

Sachin Singh · Answer

just use javascript then, i am considering your data contains parent and children "btnTree" >Draw Tree $( "#treeview .parent" ).click(function (e) { e.stopPropagation(); $( this ).find( ">ul" ).toggle( "slow" ); if ($( this ).hasClass( "close" )) $( this ).removeClass( "close" ); else $( this ).addClass( "close" ); }); var arr = [ { 'id' : 1, 'name' : "Ram" , 'parentid' : 0 }, { 'id' : 4, 'name' : "Shyam" , 'parentid' : 5 }, { 'id' : 3, 'name' : "Mohan" , 'parentid' : 1 }, { 'id' : 5, 'name' : "Sohan" , 'parentid' : 0 }, { 'id' : 6, 'name' : "Rohan" , 'parentid' : 0 }, { 'id' : 2, 'name' : "Babita" , 'parentid' : 1 }, { 'id' : 7, 'name' : "Pankaj" , 'parentid' : 4 }, { 'id' : 8, 'name' : "Ramu" , 'parentid' : 1 } ]; function createTree(arr) { var tree = [], mappedArr = {}, arrElem, mappedElem; // First map the nodes of the array to an object -> create a hash table. for (var i = 0, len = arr.length; i arrElem = arr[i]; mappedArr[arrElem.id] = arrElem; mappedArr[arrElem.id][ 'children' ] = []; } for (var id in mappedArr) { if (mappedArr.hasOwnProperty(id)) { mappedElem = mappedArr[id]; // If the element is not at the root level, add it to its parent array of children. if (mappedElem.parentid) { mappedArr[mappedElem[ 'parentid' ]][ 'children' ].push(mappedElem); } // If the element is at the root level, add it to first level elements array. else { tree.push(mappedElem); } } } return tree; } function buildList(data, isSub) { var html = (isSub) ? ' ' : '' ; // Wrap with div if true html += ' ' ; for (item in data) { html += ' ' ; if (typeof (data[item].children) === 'object' ) { // An array will return 'object' if (isSub) { html += ' + data[item].id + '">' + data[item].name + ' ' ; } else { html += data[item].name; // Submenu found, but top level list item. } html += buildList(data[item].children, true ); // Submenu found. Calling recursively same method (and wrapping it in a div) } else { html += data[item].name // No submenu } html += ' ' ; } html += ' ' ; html += (isSub) ? ' ' : '' ; return html; } $( "#btnTree" ).click(function () { var tree = createTree(arr); var html = buildList(tree, false ); document.body.innerHTML += html; });

Mageshwaran R · Answer

Hi John, try this code, link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > script > script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js" > script > script type = "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); } }); }); script > div id = "dvTree" > div > C#: [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 Node > (); } public string id { get; set; } public string text { get; set; } public string icon { get; set; } public List Node > nodes { get; set; } }

Kiran Mohanty · Answer

Hi, Based on your condition you can define nested ul => li structure with css to get a tree view structure in UI. Take a look at below link . https://www.w3schools.com/howto/howto_js_treeview.asp

how to load treeview in asp.net using javascript with no aspx.cs file.

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (3)