I've been struggle to solve this problem in within one day but still unable to get rid on it. I've attached along picture to clarify on this problem to what I need. I've define a border to entire text area of nodes and those server control nodestyle seems to be only apply everythings inside the nodes area but not outside where you've to define your own ways.
Markup View:
<div style="float: left;padding-left:25px">
<asp:TreeView ID="ProductLineView" runat="server" EnableClientScript="true" PopulateNodesFromClient="true" ClientIDMode="Static" Width="850px" ExpandImageUrl="~/App_Themes/PPHPG/Images/plus.png"
CollapseImageUrl="~/App_Themes/PPHPG/Images/minus.png" OnTreeNodePopulate="ProductLineView_TreeNodePopulate">
<NodeStyle CssClass="ProductLineNodeStyle" Width="850px" NodeSpacing="3.5" />
<LeafNodeStyle CssClass="ProductLineLeaftNodeStyle" NodeSpacing="1.2" />
</asp:TreeView>
</div>
<script type="text/javascript">
function pageLoad(){
$("[id*='ProductLineViewn']").each(function () {
var targetid = $(this).attr("Id");
if (targetid.indexOf("Nodes") != -1) {
$(this).css({
"margin-left": "85px",
"width": "765px",
"margin-bottom": "25px",
});
}
else
{
$(this).css("padding-right","45px");
}
});
}
</script>
<style type="text/css">
#ProductLineView {
font-size: 1.8em;
}
.ProductLineNodeStyle {
margin-left:7px;
border: 1px solid black;
background-color:white;
}
.ProductLineLeaftNodeStyle {
margin-left: 5px;
}
</style>
Code Behind:
var PreviousJobNumber = String.Empty;
var NodeCount = 0;
dynamic ActiveNode = null;
dynamic StepCount = null;
var JobDescription = String.Empty;
this.ProductLineView.Nodes.Clear();
foreach(var item in query)
{
dynamic SectionId = null;
TreeNode DetailNode;
if (PreviousJobNumber != item.ps_no)
{
PreviousJobNumber = item.ps_no;
SectionId = item.Id.ToString();
Int32 SectionValue = Convert.ToInt32(SectionId);
JobDescription = timesheet.SectionGroups.Where(p => p.Id == SectionValue).Select(p => p.StockDescription).SingleOrDefault();
TreeNode HeaderNode = new TreeNode();
HeaderNode.Text = item.ps_no + " " + "Receive Quantity" + " " + "Target Quantity" + " " + "<a href=''>Access</a>";
TreeNode DescriptionNode = new TreeNode();
DescriptionNode.Text = JobDescription;
DescriptionNode.Value = "Desc"; HeaderNode.ChildNodes.Add(DescriptionNode);
StepCount = 1;
DetailNode = new TreeNode();
DetailNode.Text = "(Step " + StepCount + ") " + SectionId;
DetailNode.Value = SectionId;
HeaderNode.ChildNodes.Add(DetailNode);
this.ProductLineView.Nodes.Add(HeaderNode);
ActiveNode = NodeCount;
NodeCount += 1;
}
else
{
StepCount += 1;
SectionId = item.Id.ToString();
DetailNode = new TreeNode();
DetailNode.Text = "(Step " + StepCount + ") " + SectionId;
DetailNode.Value = SectionId;
this.ProductLineView.Nodes[ActiveNode]
.ChildNodes.Add(DetailNode);
}
this.ProductLineView.ExpandAll();
}
}
Thanks to anyone could help.