The code below functions correctly and provides the expected output.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TreeView_Table_Project.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Css/jquery.treegrid.css" rel="stylesheet" />
<script src="Js/jquery.treegrid.js"></script>
<script src="Js/jquery.treegrid.bootstrap3.js"></script>
<script>
$(document).ready(function () {
$('.tree').treegrid();
});
</script>
<style>
tr, td {
border: 2px solid black;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table class="tree">
<tr class="treegrid-1">
<td>Root node 1</td>
<td>Additional info</td>
</tr>
<tr class="treegrid-2 treegrid-parent-1">
<td>Node 1-1</td>
<td>Additional info</td>
</tr>
<tr class="treegrid-3 treegrid-parent-1">
<td>Node 1-1</td>
<td>Additional info</td>
</tr>
</table>
</body>
</html>
The following code does not work when dynamically creating the table.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Css/jquery.treegrid.css" rel="stylesheet" />
<script src="Js/jquery.jqGrid.min.js"></script>
<script src="Js/jquery.treegrid.bootstrap3.js"></script>
<script src="Js/jquery.treegrid.js"></script>
<script>
$(document).ready(function () {
f1();
$('.tree').treegrid();
});
function f1() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Bootstrap_TreeGrid.aspx/StateAnalysis",
data: "{}",
dataType: "json",
success: function (Result) {
Result = Result.d;
drawTab(Result);
},
error: function (Result) {
alert("Error");
}
});
function drawTab(data1) {
var Result = data1;
for (i = 0; i < Result.length; i++) {
var m = i + 1;
if (i == 0) {
$('<tr>', {
'class': 'treegrid-' + m,
}).appendTo($(".tree"));
//$(".tree").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
//row.append($("<tr class='treegrid'+>Jurisdiction</tr>"));
$('<td>', {
text: 'phani',
}).appendTo($('.treegrid-' + m));
}
else {
$('<tr>', {
'class': 'treegrid-parent-1 treegrid-' + m,
}).appendTo($('.tree'));
//$(".tree").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
//row.append($("<tr class='treegrid'+>Jurisdiction</tr>"));
$('<td>', {
text: 'phani',
}).appendTo($('.treegrid-' + m));
}
}
}
}
</script>
<style>
tr, td {
border: 2px solid black;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<table class="tree">
</table>
</body>
</html>
The provided code is not functioning correctly. It works with static data but encounters issues when attempting dynamic creation. Thank you in advance.