TreeView: How to make a node top align?

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
 
S

Steven Cheng [MSFT]

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.

--------------------
 
M

Max2006

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...
 
S

Steven Cheng [MSFT]

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.

--------------------
 
S

Steven Cheng [MSFT]

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...
 
M

Max2006

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...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
Slideshow not working properly 2
How to have two html audio players on one page? 0
How to stop an animated image from sticking to top of page? 2
How can I add arrows to my FAQ 0
I Need Help with making a function that draws in a canvas using location data. 1
I need help making a zooming function 11
Need help with code on website (noob) 2

Members online

No members online now.
Total: 34 (members: 1, guests: 33)
Robots: 487

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top