TreeView: How to make a node top align?

  • Thread starter Thread starter Max2006
  • Start date Start date
M

Max2006

Hi,

I have a TreeView and this is my node style:

<asp:TreeNodeStyle ForeColor = "#000000" Font-Size="9px" Font-Bold="false"
Width="100px" NodeSpacing="3px" />

The problem is the expand button (+) resides right at the middle of
multi-line text. Can I make the expand button top align instead of middle
align?

Any help would be appreciated,
Max
 
Hi Max,

From your description, you're wantting to set the TreeView Node's
expand/collapse button(+/-) to aligh to top when the TreeNode contains text
expanded to multiple lines, correct?

I've performed some research on this. It seems the TreeView or TreeNode's
built-in style settings doesn't expose the properties for us to adjust the
vertical alignment of elements in TreeNode. Also, there hasn't any
server-side event for us to hook the node generation.

So far I have found a solution use some javascript code to adjust the
vertical alignment of the table cell (<td> element) that contains the
treeNode content(such as the +/- button and content). You can run it at
the page's load time. Here is a sample page I've built for your reference:


==============================================
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function adjust_treenodes()
{
var divs = document.getElementsByTagName("div");

var i,j;

for(i=0;i<divs.length;++i)
{
//first search for all the <div> for treeview nodes

if(divs.id.indexOf("TreeView") != -1)
{

//then set the vertical alignment for each <td> nested inside the
treenode div

var tds = divs.getElementsByTagName("td");
for(j=0;j<tds.length;++j) tds[j].style.verticalAlign="top";

}
}
}

</script>
</head>
<body onload="adjust_treenodes();">
<form id="form1" runat="server">
<div>

<asp:TreeView ID="TreeView1" runat="server"
style="vertical-align:bottom" >
<NodeStyle Width="100px" />

<Nodes >
<asp:TreeNode Text="New Node1--long test multi-line test
..........................................." Value="New Node1">
<asp:TreeNode Text="New Node11--long test multi-line
test ..........................................." Value="New
Node11"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="New Node2--long test multi-line test
..........................................." Value="New Node2">
<asp:TreeNode Text="New Node21--long test multi-line
test ..........................................." Value="New
Node21"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="New Node3" Value="New Node3">
<asp:TreeNode Text="New Node31" Value="New
Node31"></asp:TreeNode>
</asp:TreeNode>

</Nodes>
<LevelStyles >

</LevelStyles>
</asp:TreeView>

</div>
</form>
</body>
=======================================

Hope this helps.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
 
Hi Steven,

Thanks for help.

I was hoping to have some light CSS settings to do this. Is it possible?

Thanks again,
Max



Steven Cheng said:
Hi Max,

From your description, you're wantting to set the TreeView Node's
expand/collapse button(+/-) to aligh to top when the TreeNode contains
text
expanded to multiple lines, correct?

I've performed some research on this. It seems the TreeView or TreeNode's
built-in style settings doesn't expose the properties for us to adjust the
vertical alignment of elements in TreeNode. Also, there hasn't any
server-side event for us to hook the node generation.

So far I have found a solution use some javascript code to adjust the
vertical alignment of the table cell (<td> element) that contains the
treeNode content(such as the +/- button and content). You can run it at
the page's load time. Here is a sample page I've built for your reference:


==============================================
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function adjust_treenodes()
{
var divs = document.getElementsByTagName("div");

var i,j;

for(i=0;i<divs.length;++i)
{
//first search for all the <div> for treeview nodes

if(divs.id.indexOf("TreeView") != -1)
{

//then set the vertical alignment for each <td> nested inside the
treenode div

var tds = divs.getElementsByTagName("td");
for(j=0;j<tds.length;++j) tds[j].style.verticalAlign="top";

}
}
}

</script>
</head>
<body onload="adjust_treenodes();">
<form id="form1" runat="server">
<div>

<asp:TreeView ID="TreeView1" runat="server"
style="vertical-align:bottom" >
<NodeStyle Width="100px" />

<Nodes >
<asp:TreeNode Text="New Node1--long test multi-line test
.........................................." Value="New Node1">
<asp:TreeNode Text="New Node11--long test multi-line
test ..........................................." Value="New
Node11"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="New Node2--long test multi-line test
.........................................." Value="New Node2">
<asp:TreeNode Text="New Node21--long test multi-line
test ..........................................." Value="New
Node21"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="New Node3" Value="New Node3">
<asp:TreeNode Text="New Node31" Value="New
Node31"></asp:TreeNode>
</asp:TreeNode>

</Nodes>
<LevelStyles >

</LevelStyles>
</asp:TreeView>

</div>
</form>
</body>
=======================================

Hope this helps.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.

--------------------
From: "Max2006" <[email protected]>
Subject: TreeView: How to make a node top align?
Date: Mon, 14 Jul 2008 18:48:16 -0400
Click to expand...
Hi,

I have a TreeView and this is my node style:

<asp:TreeNodeStyle ForeColor = "#000000" Font-Size="9px" Font-Bold="false"
Width="100px" NodeSpacing="3px" />

The problem is the expand button (+) resides right at the middle of
multi-line text. Can I make the expand button top align instead of middle
align?

Any help would be appreciated,
Max
Click to expand...
Click to expand...
 
Thanks for your reply Max,

Yes, I've also tried the CSS approach. However, it seems the cssClass we
applied on <NodeStyle> will only be specified on the <td> which contains
the Text content of the TreeNode, but not the <td> which contains the +/-
expand/collapse image. that's why the css style approach not quite work
here. BTW, have you tried using the Css control adapter for TreeView:

#ASP.NET 2.0 CSS Friendly Control Adapters: The Walkthrough
http://www.asp.net/cssadapters/WalkThru/Walkthrough.aspx

this adapter toolkit can make those adpatable controls more CSS friendly
which may open more doors on customization.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
 
Hi Max,

How are you doing? Have you got any further ideas on this issue or have you
tried the CSS adapter to see whether it helps?

Sincerely,

Steven Cheng
Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
Content-Transfer-Encoding: 7bit
From: (e-mail address removed) (Steven Cheng [MSFT])
Organization: Microsoft
Date: Wed, 16 Jul 2008 02:45:10 GMT
Subject: Re: TreeView: How to make a node top align?
Click to expand...
 
Hi Steven,

Thank you for follow up. At this point I am going to leave the alignment as
is to avoid complexity.
I home we have more flexibility in future versions of TreeView.

Thank you,
Max


Steven Cheng said:
Hi Max,

How are you doing? Have you got any further ideas on this issue or have
you
tried the CSS adapter to see whether it helps?

Sincerely,

Steven Cheng
Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.

--------------------
Content-Transfer-Encoding: 7bit
From: (e-mail address removed) (Steven Cheng [MSFT])
Organization: Microsoft
Date: Wed, 16 Jul 2008 02:45:10 GMT
Subject: Re: TreeView: How to make a node top align?
Click to expand...
Thanks for your reply Max,

Yes, I've also tried the CSS approach. However, it seems the cssClass we
applied on <NodeStyle> will only be specified on the <td> which contains
the Text content of the TreeNode, but not the <td> which contains the +/-
expand/collapse image. that's why the css style approach not quite work
here. BTW, have you tried using the Css control adapter for TreeView:

#ASP.NET 2.0 CSS Friendly Control Adapters: The Walkthrough
http://www.asp.net/cssadapters/WalkThru/Walkthrough.aspx

this adapter toolkit can make those adpatable controls more CSS friendly
which may open more doors on customization.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.
Click to expand...
Click to expand...
 
Back
Top