You will have to use string builder to make your tree and query strings to retrieve values form database. you have to do two things - create tree and fi dteails in the tree. Here is a sample. Change it according to your need. :)
this is for creating tree
protected string createTree()
{
StringBuilder sMemberTree = new StringBuilder();
sMemberTree.Append("<table class='genelogyTreeMain' border='0' cellspacing='0' cellpadding='0' align='center' width='95%'><tr>");
if (webFactory.getUser(Session.SessionID).IsActive)
{
sMemberTree.Append("<td valign='bottom' colspan='3' align='center'>");
img = sponsorGender == "Male" ? "maleSpo.jpg" : "femaleSpo.jpg";
sMemberTree.Append("<a href='tree.aspx?id=" + sponsorId + "&name=" + sponsorName + "&gender=" + sponsorGender + "'><img src='../treeImg/" + img + "' border='0'/></a></td></tr>");
sMemberTree.Append("<tr><td valign='top' colspan='3' align='center'><a href='tree.aspx?id=" + sponsorId + "&name=" + sponsorName + "&gender=" + sponsorGender + "'>" + sponsorName + "</a></td></tr>");
sMemberTree.Append("<tr><td valign='top' colspan='3' align='center'><a href='tree.aspx?id=" + sponsorId + "&name=" + sponsorName + "&gender=" + sponsorGender + "'>" + sponsorId + "</a></td></tr>");
sMemberTree.Append(" <tr style='height: 38px;'>");
sMemberTree.Append(" <td valign='top' align='left' colspan='3' style='background-image: url(../treeImg/downlineOn.jpg);background-repeat: no-repeat; background-attachment: scroll; background-position: center center'></td></tr>");
sMemberTree.Append(" <tr><td align='center' valign='top' style='width:48%'>");
#region "Create New Table Left for Ist Level Employees."
sMemberTree.Append(" <div style='width:450px;height:250px; overflow: auto ;valign:top'>");
sMemberTree.Append(" <table class='genelogyTree' border='0' cellspacing= '5' cellpadding='3' style='width:100%'><tr>");
for (int i = 0; i < dtb.Rows.Count; i++)
{
if (CommonFunctions.GetShortKitName(Convert.ToString(dtb.Rows[i]["VmemLeftRightPos"]), 1).ToString() == "L")
{
switch (dtb.Rows[i]["VmemLeftRightPos"].ToString())
{
case "L20": { goto GETVALUE; break; }
case "L19": { goto GETVALUE; break; }
case "L18": { goto GETVALUE; break; }
case "L17": { goto GETVALUE; break; }
case "L16": { goto GETVALUE; break; }
case "L15": { goto GETVALUE; break; }
case "L14": { goto GETVALUE; break; }
case "L13": { goto GETVALUE; break; }
case "L12": { goto GETVALUE; break; }
case "L11": { goto GETVALUE; break; }
case "L10": { goto GETVALUE; break; }
case "L9": { goto GETVALUE; break; }
case "L8": { goto GETVALUE; break; }
case "L7": { goto GETVALUE; break; }
case "L6": { goto GETVALUE; break; }
case "L5": { goto GETVALUE; break; }
case "L4": { goto GETVALUE; break; }
case "L3": { goto GETVALUE; break; }
case "L2": { goto GETVALUE; break; }
case "L1": { goto GETVALUE; break; }
}
GETVALUE:
{
name = dtb.Rows[i]["VmemName"].ToString();
id = dtb.Rows[i]["VmemId"].ToString();
gender = dtb.Rows[i]["VmemGender"].ToString();
img = gender == "Male" ? "male.jpg" : "female.jpg";
}
sMemberTree.Append("<td valign='top' align='center' ><a href='tree.aspx?id=" + id + "&name=" + name + "&gender=" + gender + "'><img src='../treeImg/" + img + "' border='0'/></a><br/><a href='tree.aspx?id=" + id + "&name=" + name + "&gender=" + gender + "'> " + CommonFunctions.GetShortMemberName(Convert.ToString(name), 10).ToString() + "</a> <br/> <a href='tree.aspx?id=" + id + "&name=" + name + "&gender=" + gender + "'>" + id + "</a> <br/><span>" + dtb.Rows[i]["VmemLeftRightPos"].ToString() + "<br/></span> </td>");
}
}
sMemberTree.Append("</tr></table>");
sMemberTree.Append("</div>");
#endregion
sMemberTree.Append(" </td><td></td><td align='center' valign='top' style='width:48%'>");
#region "Create New Table Right for Ist Level Employees."
sMemberTree.Append(" <div style='width:450px;height:250px; overflow: auto ;valign:top'>");
sMemberTree.Append(" <table class='genelogyTree' border='0' cellspacing= '5' cellpadding='3'><tr>");
for (int i = 0; i < dtb.Rows.Count; i++)
{
if (CommonFunctions.GetShortKitName(Convert.ToString(dtb.Rows[i]["VmemLeftRightPos"]), 1).ToString() == "R")
{
switch (dtb.Rows[i]["VmemLeftRightPos"].ToString())
{
case "R20": { goto GETRIGHTVALUE; break; }
case "R19": { goto GETRIGHTVALUE; break; }
case "R18": { goto GETRIGHTVALUE; break; }
case "R17": { goto GETRIGHTVALUE; break; }
case "R16": { goto GETRIGHTVALUE; break; }
case "R15": { goto GETRIGHTVALUE; break; }
case "R14": { goto GETRIGHTVALUE; break; }
case "R13": { goto GETRIGHTVALUE; break; }
case "R12": { goto GETRIGHTVALUE; break; }
case "R11": { goto GETRIGHTVALUE; break; }
case "R10": { goto GETRIGHTVALUE; break; }
case "R9": { goto GETRIGHTVALUE; break; }
case "R8": { goto GETRIGHTVALUE; break; }
case "R7": { goto GETRIGHTVALUE; break; }
case "R6": { goto GETRIGHTVALUE; break; }
case "R5": { goto GETRIGHTVALUE; break; }
case "R4": { goto GETRIGHTVALUE; break; }
case "R3": { goto GETRIGHTVALUE; break; }
case "R2": { goto GETRIGHTVALUE; break; }
case "R1": { goto GETRIGHTVALUE; break; }
}
GETRIGHTVALUE:
{
name = dtb.Rows[i]["VmemName"].ToString();
id = dtb.Rows[i]["VmemId"].ToString();
gender = dtb.Rows[i]["VmemGender"].ToString();
img = gender == "Male" ? "male.jpg" : "female.jpg";
}
sMemberTree.Append("<td valign='top' align='center' colspan='2' ><a href='tree.aspx?id=" + id + "&name=" + name + "&gender=" + gender + "'><img src='../treeImg/" + img + "' border='0'/></a><br/><a href='tree.aspx?id=" + id + "&name=" + name + "&gender=" + gender + "'> " + CommonFunctions.GetShortMemberName(Convert.ToString(name), 10).ToString() + "</a> <br/> <a href='tree.aspx?id=" + id + "&name=" + name + "&gender=" + gender + "'>" + id + "</a> <br/><span>" + dtb.Rows[i]["VmemLeftRightPos"].ToString() + "</span> </td>");
}
}
sMemberTree.Append("</tr></table>");
sMemberTree.Append("</div>");
#endregion
}
else { sMemberTree.Append("<td valign='bottom' align='center'><div style='font-family:Arial Rounded MT Bold; font-size: 1.8em; font-weight: bold; color: #A11815; letter-spacing: 1px; word-spacing: 1.5px;background-position: center top; font-family: 'Arial Rounded MT Bold'; font-size: 15pt; font-weight: bold; color: #A11815; letter-spacing: 1px; word-spacing: 1.5px; background-image: url('../img/inactiveBack.jpg'); background-repeat: no-repeat; background-attachment: scroll; width: 750px; height: 200px;'><br/><br/><br/>Dear Member you are still INACTIVE.</div><br/><br/><br/><br/><br/><br/>"); }
sMemberTree.Append("</td></tr></table>");
return sMemberTree.ToString();
}
and this is for tree details
protected string treeDetail()
{
StringBuilder sMemberTree = new StringBuilder();
sMemberTree.Append(" <center><table class='genelogyCount' width='700px' cellspacing='5' cellpadding='3' style='border: 1px double #FF3300; '>");
if (webFactory.getUser(Session.SessionID).IsActive)
{
Int32 leftCount = 0, rightCount = 0;
for (int i = 0; i < dtb.Rows.Count; i++)
{
if (CommonFunctions.GetShortKitName(Convert.ToString(dtb.Rows[i]["VmemLeftRightPos"]), 1).ToString() == "L")
{
leftCount++;
}
else if (CommonFunctions.GetShortKitName(Convert.ToString(dtb.Rows[i]["VmemLeftRightPos"]), 1).ToString() == "R")
{
rightCount++;
}
}
sMemberTree.Append("<tr><td class='field'>Member Name</td><td class='valueTD'>" + CommonFunctions.GetShortMemberName(Convert.ToString(sponsorName), 12).ToString() + "</td><td class='field'>Member Id</td><td class='valueTD'>" + sponsorId + "</td></tr>");
sMemberTree.Append("<tr><td class='field'>Left Members</td><td class='valueTD'>" + leftCount + "</td><td class='field'>Right Members</td><td class='valueTD'>" + rightCount + "</td></tr>");
sMemberTree.Append("</table></center><br/>");
}
return sMemberTree.ToString();
}