TreeView: How to make a node top align?

**Steven Cheng [MSFT]** · Jul 15 '08, 03:35 AM

RE: TreeView: How to make a node top align?

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 (<tdelement) 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>Untitl ed Page</title>
<script type="text/javascript">
function adjust_treenode s()
{
var divs = document.getEle mentsByTagName( "div");

var i,j;

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

if(divs[i].id.indexOf("Tr eeView") != -1)
{

//then set the vertical alignment for each <tdnested inside the
treenode div

var tds = divs[i].getElementsByT agName("td");
for(j=0;j<tds.l ength;++j) tds[j].style.vertical Align="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:
msdnmg@microsof t.com.

=============== =============== =============== =====
Get notification to my posts through email? Please refer to

Microsoft Learn: Build skills that open doors in your career

http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif

Gain technical skills through documentation and training, earn certifications and connect with the community

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/subscripti...t/default.aspx.
=============== =============== =============== =====
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------

>From: "Max2006" <alanalan1@news group.nospam>
>Subject: TreeView: How to make a node top align?
>Date: Mon, 14 Jul 2008 18:48:16 -0400

>Hi,
>
>I have a TreeView and this is my node style:
>
<asp:TreeNodeSt yle ForeColor = "#000000" Font-Size="9px"

Font-Bold="false"

>Width="100px " NodeSpacing="3p x" />
>
>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
>
>
>

**Max2006** · Jul 15 '08, 02:25 PM

Re: TreeView: How to make a node top align?

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 [MSFT]" <stcheng@online .microsoft.comw rote in message
news:8cYRXsi5IH A.1624@TK2MSFTN GHUB02.phx.gbl. ..

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 (<tdelement) 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>Untitl ed Page</title>
<script type="text/javascript">
function adjust_treenode s()
{
var divs = document.getEle mentsByTagName( "div");
>
var i,j;
>
for(i=0;i<divs. length;++i)
{
//first search for all the <divfor treeview nodes
>
if(divs[i].id.indexOf("Tr eeView") != -1)
{
>
//then set the vertical alignment for each <tdnested inside the
treenode div
>
var tds = divs[i].getElementsByT agName("td");
for(j=0;j<tds.l ength;++j) tds[j].style.vertical Align="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:
msdnmg@microsof t.com.
>
=============== =============== =============== =====
Get notification to my posts through email? Please refer to

Microsoft Learn: Build skills that open doors in your career

http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif

Gain technical skills through documentation and training, earn certifications and connect with the community

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/subscripti...t/default.aspx.
=============== =============== =============== =====
This posting is provided "AS IS" with no warranties, and confers no
rights.
>
--------------------

>>From: "Max2006" <alanalan1@news group.nospam>
>>Subject: TreeView: How to make a node top align?
>>Date: Mon, 14 Jul 2008 18:48:16 -0400

>

>>Hi,
>>
>>I have a TreeView and this is my node style:
>>
><asp:TreeNodeS tyle ForeColor = "#000000" Font-Size="9px"

Font-Bold="false"

>>Width="100p x" NodeSpacing="3p x" />
>>
>>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
>>
>>
>>

>

**Steven Cheng [MSFT]** · Jul 16 '08, 02:55 AM

Re: TreeView: How to make a node top align?

Thanks for your reply Max,

Yes, I've also tried the CSS approach. However, it seems the cssClass we
applied on <NodeStylewil l only be specified on the <tdwhich contains
the Text content of the TreeNode, but not the <tdwhich 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

ASP.NET Core, an open-source web development framework | .NET

http://www.asp.net/cssadapters/WalkThru/Walkthrough.aspx

Build web apps and services that run on Windows, Linux, and macOS using C#, HTML, CSS, and JavaScript. Get started for free on Windows, Linux, or macOS.

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:
msdnmg@microsof t.com.

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

--------------------

>From: "Max2006" <alanalan1@news group.nospam>
>References: <F58D3D0D-4EF9-4235-9297-2A0A0BA83DCE@mi crosoft.com>

<8cYRXsi5IHA.16 24@TK2MSFTNGHUB 02.phx.gbl>

>Subject: Re: TreeView: How to make a node top align?
>Date: Tue, 15 Jul 2008 10:21:51 -0400
>Lines: 3
>
>
>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 [MSFT]** · Jul 18 '08, 11:25 AM

Re: TreeView: How to make a node top align?

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:
msdnmg@microsof t.com.

=============== =============== =============== =====
Get notification to my posts through email? Please refer to

Microsoft Learn: Build skills that open doors in your career

http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif

Gain technical skills through documentation and training, earn certifications and connect with the community

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

--------------------

>Content-Transfer-Encoding: 7bit
>From: stcheng@online. microsoft.com (Steven Cheng [MSFT])
>Organization : Microsoft
>Date: Wed, 16 Jul 2008 02:45:10 GMT
>Subject: Re: TreeView: How to make a node top align?

>
>Thanks for your reply Max,
>
>Yes, I've also tried the CSS approach. However, it seems the cssClass we
>applied on <NodeStylewil l only be specified on the <tdwhich contains
>the Text content of the TreeNode, but not the <tdwhich 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/WalkT...lkthrough.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:
>msdnmg@microso ft.com.
>
>============== =============== =============== ======
>This posting is provided "AS IS" with no warranties, and confers no rights.
>
>--------------------

>>From: "Max2006" <alanalan1@news group.nospam>
>>References: <F58D3D0D-4EF9-4235-9297-2A0A0BA83DCE@mi crosoft.com>

><8cYRXsi5IHA.1 624@TK2MSFTNGHU B02.phx.gbl>

>>Subject: Re: TreeView: How to make a node top align?
>>Date: Tue, 15 Jul 2008 10:21:51 -0400
>>Lines: 3
>>
>>
>>Hi Steven,
>>
>>Thanks for help.
>>
>>I was hoping to have some light CSS settings to do this. Is it possible?
>>
>>Thanks again,
>>Max
>>

>>> </

>
>

**Max2006** · Jul 18 '08, 09:05 PM

Re: TreeView: How to make a node top align?

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 [MSFT]" <stcheng@online .microsoft.comw rote in message
news:gUYyYhM6IH A.4020@TK2MSFTN GHUB02.phx.gbl. ..

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:
msdnmg@microsof t.com.
>
=============== =============== =============== =====
Get notification to my posts through email? Please refer to

Microsoft Learn: Build skills that open doors in your career

http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif

Gain technical skills through documentation and training, earn certifications and connect with the community

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

>>Content-Transfer-Encoding: 7bit
>>From: stcheng@online. microsoft.com (Steven Cheng [MSFT])
>>Organizatio n: Microsoft
>>Date: Wed, 16 Jul 2008 02:45:10 GMT
>>Subject: Re: TreeView: How to make a node top align?

>

>>
>>Thanks for your reply Max,
>>
>>Yes, I've also tried the CSS approach. However, it seems the cssClass we
>>applied on <NodeStylewil l only be specified on the <tdwhich contains
>>the Text content of the TreeNode, but not the <tdwhich 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/WalkT...lkthrough.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:
>>msdnmg@micros oft.com.
>>
>>============= =============== =============== =======
>>This posting is provided "AS IS" with no warranties, and confers no
>>rights.
>>
>>--------------------

>>>From: "Max2006" <alanalan1@news group.nospam>
>>>References : <F58D3D0D-4EF9-4235-9297-2A0A0BA83DCE@mi crosoft.com>

>><8cYRXsi5IHA. 1624@TK2MSFTNGH UB02.phx.gbl>

>>>Subject: Re: TreeView: How to make a node top align?
>>>Date: Tue, 15 Jul 2008 10:21:51 -0400
>>>Lines: 3
>>>
>>>
>>>Hi Steven,
>>>
>>>Thanks for help.
>>>
>>>I was hoping to have some light CSS settings to do this. Is it possible?
>>>
>>>Thanks again,
>>>Max
>>>
>>>> </

>>
>>

>

TreeView: How to make a node top align?

TreeView: How to make a node top align?

Comment

Comment

Comment

Comment

Comment