By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,931 Members | 1,541 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,931 IT Pros & Developers. It's quick & easy.

Can I use more than one style in a treeview control at the root no

P: n/a
I have a treeview sourced from a SiteMap. I want to use 2 different CSS
styles for the root level nodes. The topmost root node should not have a top
border, all the other root nodes should have a top border.

Is it possible to have more than 1 style at the same level (parent node)
when using a SiteMap?

I want it to appear something like this and I can only find a way to either
have the border on all root nodes or none at all. In addition to the border,
having a larger top margin on the other roots would also help the appearance.

root #1
child 1.1
child 1.2
-----------------------
root #2
child 2.1
-----------------------
root #3
child 3.1
Dec 26 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
Hi P3T3R,

Welcome to ASPNET newsgroup.
As for the ASP.NET 2.0 TreeView control, the TreeNode style is arranged
based on Node level. So far I think we can only use Level Info to specify
different Styles for TreeNode (We can use the LevelStyles to apply
different styles for individule levels...). For your scenario, there're
some certain TreeNodes in a certain Level which you want to do some
cutomization, I think you may consider using some of the TreeView's Events,
like TreeNodeDataBound, and do the customization work for the certain
Nodes in that event... Or you can also use TreeView's DataBound event
(whicn fires after TreeView has been bound with data) or the PreRender
event and locate the Nodes and change the style of them there....

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

--------------------
| Thread-Topic: Can I use more than one style in a treeview control at the
root no
| thread-index: AcYKQXFFHbLdIR2lT6KgIMpD2LxKyg==
| X-WBNR-Posting-Host: 24.87.190.40
| From: "=?Utf-8?B?cDN0M3I=?=" <P3***@newsgroups.nospam>
| Subject: Can I use more than one style in a treeview control at the root
no
| Date: Mon, 26 Dec 2005 09:26:01 -0800
| Lines: 20
| Message-ID: <12**********************************@microsoft.co m>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.0
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: TK2MSFTNGXA03.phx.gbl 10.40.2.250
| Path: TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA01.phx.gbl!TK2MSF TNGXA03.phx.gbl
| Xref: TK2MSFTNGXA02.phx.gbl
microsoft.public.dotnet.framework.aspnet:367074
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| I have a treeview sourced from a SiteMap. I want to use 2 different CSS
| styles for the root level nodes. The topmost root node should not have a
top
| border, all the other root nodes should have a top border.
|
| Is it possible to have more than 1 style at the same level (parent node)
| when using a SiteMap?
|
| I want it to appear something like this and I can only find a way to
either
| have the border on all root nodes or none at all. In addition to the
border,
| having a larger top margin on the other roots would also help the
appearance.
|
| root #1
| child 1.1
| child 1.2
| -----------------------
| root #2
| child 2.1
| -----------------------
| root #3
| child 3.1
|

Dec 27 '05 #2

P: n/a
In addition to the server side solution that Steven proposed, you might use a
client-side CSS or JavaScript (depending on your target browser for display).

Each TreeViewNode renders an HTML table object. If you were to enclose the
entire TreeView object in a div then you can style the first table (which is
the first node) within this div.

For example:
<div id="TOC">
<asp:TreeView ID="TreeView1" runat="server" >
<%--The implementation of the tree view --%>
</asp:TreeView>
</div>

Then you would add a Javascript similar to this:
<script language="Javascript">
window.onload=function(e){
var firstRootNode =
document.getElementById("TOC").getElementsByTagNam e("table")[0];
firstRootNode.style.borderTop = '0';
}
</script>

For browsers other than IE you might have used only pseudo classes, e.g.
#TOC table:first-child{border-top:0}

Unfortunately pseudo classes are not supported in IE.

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"p3t3r" wrote:
I have a treeview sourced from a SiteMap. I want to use 2 different CSS
styles for the root level nodes. The topmost root node should not have a top
border, all the other root nodes should have a top border.

Is it possible to have more than 1 style at the same level (parent node)
when using a SiteMap?

I want it to appear something like this and I can only find a way to either
have the border on all root nodes or none at all. In addition to the border,
having a larger top margin on the other roots would also help the appearance.

root #1
child 1.1
child 1.2
-----------------------
root #2
child 2.1
-----------------------
root #3
child 3.1

Dec 27 '05 #3

P: n/a
Both replies will be good enough to address the problem, thank you.

This is in a master page, and in a div for scrolling with only IE as the
target browser so either one will do.

"Phillip Williams" wrote:
In addition to the server side solution that Steven proposed, you might use a
client-side CSS or JavaScript (depending on your target browser for display).

Each TreeViewNode renders an HTML table object. If you were to enclose the
entire TreeView object in a div then you can style the first table (which is
the first node) within this div.

For example:
<div id="TOC">
<asp:TreeView ID="TreeView1" runat="server" >
<%--The implementation of the tree view --%>
</asp:TreeView>
</div>

Then you would add a Javascript similar to this:
<script language="Javascript">
window.onload=function(e){
var firstRootNode =
document.getElementById("TOC").getElementsByTagNam e("table")[0];
firstRootNode.style.borderTop = '0';
}
</script>

For browsers other than IE you might have used only pseudo classes, e.g.
#TOC table:first-child{border-top:0}

Unfortunately pseudo classes are not supported in IE.

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"p3t3r" wrote:
I have a treeview sourced from a SiteMap. I want to use 2 different CSS
styles for the root level nodes. The topmost root node should not have a top
border, all the other root nodes should have a top border.

Is it possible to have more than 1 style at the same level (parent node)
when using a SiteMap?

I want it to appear something like this and I can only find a way to either
have the border on all root nodes or none at all. In addition to the border,
having a larger top margin on the other roots would also help the appearance.

root #1
child 1.1
child 1.2
-----------------------
root #2
child 2.1
-----------------------
root #3
child 3.1

Dec 27 '05 #4

P: n/a
Hi Steven

Can you post a code to override the style in the server-side? I have the
same problem as p3t3r has.

I tried to set TreeNodeStyle in the TreeNodeDataBound eventm but the
TreeNode does not expose, so I could not set the style. How can i set the
style, please help.

Thanks
Sandeep

"Steven Cheng[MSFT]" wrote:
Hi P3T3R,

Welcome to ASPNET newsgroup.
As for the ASP.NET 2.0 TreeView control, the TreeNode style is arranged
based on Node level. So far I think we can only use Level Info to specify
different Styles for TreeNode (We can use the LevelStyles to apply
different styles for individule levels...). For your scenario, there're
some certain TreeNodes in a certain Level which you want to do some
cutomization, I think you may consider using some of the TreeView's Events,
like TreeNodeDataBound, and do the customization work for the certain
Nodes in that event... Or you can also use TreeView's DataBound event
(whicn fires after TreeView has been bound with data) or the PreRender
event and locate the Nodes and change the style of them there....

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

--------------------
| Thread-Topic: Can I use more than one style in a treeview control at the
root no
| thread-index: AcYKQXFFHbLdIR2lT6KgIMpD2LxKyg==
| X-WBNR-Posting-Host: 24.87.190.40
| From: "=?Utf-8?B?cDN0M3I=?=" <P3***@newsgroups.nospam>
| Subject: Can I use more than one style in a treeview control at the root
no
| Date: Mon, 26 Dec 2005 09:26:01 -0800
| Lines: 20
| Message-ID: <12**********************************@microsoft.co m>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.0
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: TK2MSFTNGXA03.phx.gbl 10.40.2.250
| Path: TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA01.phx.gbl!TK2MSF TNGXA03.phx.gbl
| Xref: TK2MSFTNGXA02.phx.gbl
microsoft.public.dotnet.framework.aspnet:367074
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| I have a treeview sourced from a SiteMap. I want to use 2 different CSS
| styles for the root level nodes. The topmost root node should not have a
top
| border, all the other root nodes should have a top border.
|
| Is it possible to have more than 1 style at the same level (parent node)
| when using a SiteMap?
|
| I want it to appear something like this and I can only find a way to
either
| have the border on all root nodes or none at all. In addition to the
border,
| having a larger top margin on the other roots would also help the
appearance.
|
| root #1
| child 1.1
| child 1.2
| -----------------------
| root #2
| child 2.1
| -----------------------
| root #3
| child 3.1
|

Dec 28 '05 #5

P: n/a
Hi Sandeep,

There is no Style property for individual TreeNode class object, we need to
set each specific style attributes like Color, Border...... manually when
we want to customize a certain Node ......

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
--------------------
| Thread-Topic: Can I use more than one style in a treeview control at the
roo
| thread-index: AcYLQB4fWyOFn3u/TXCPVaMnWO5DAg==
| X-WBNR-Posting-Host: 216.135.182.146
| From: "=?Utf-8?B?U2FuZGVlcA==?=" <Sa*****@discussions.microsoft.com>
| References: <12**********************************@microsoft.co m>
<kk**************@TK2MSFTNGXA02.phx.gbl>
| Subject: RE: Can I use more than one style in a treeview control at the
roo
| Date: Tue, 27 Dec 2005 15:49:03 -0800
| Lines: 93
| Message-ID: <B8**********************************@microsoft.co m>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.0
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: TK2MSFTNGXA03.phx.gbl 10.40.2.250
| Path: TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA03.phx.gbl
| Xref: TK2MSFTNGXA02.phx.gbl
microsoft.public.dotnet.framework.aspnet:367218
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| Hi Steven
|
| Can you post a code to override the style in the server-side? I have the
| same problem as p3t3r has.
|
| I tried to set TreeNodeStyle in the TreeNodeDataBound eventm but the
| TreeNode does not expose, so I could not set the style. How can i set the
| style, please help.
|
| Thanks
| Sandeep
|
| "Steven Cheng[MSFT]" wrote:
|
| > Hi P3T3R,
| >
| > Welcome to ASPNET newsgroup.
| > As for the ASP.NET 2.0 TreeView control, the TreeNode style is arranged
| > based on Node level. So far I think we can only use Level Info to
specify
| > different Styles for TreeNode (We can use the LevelStyles to apply
| > different styles for individule levels...). For your scenario,
there're
| > some certain TreeNodes in a certain Level which you want to do some
| > cutomization, I think you may consider using some of the TreeView's
Events,
| > like TreeNodeDataBound, and do the customization work for the certain
| > Nodes in that event... Or you can also use TreeView's DataBound event
| > (whicn fires after TreeView has been bound with data) or the PreRender
| > event and locate the Nodes and change the style of them there....
| >
| > Regards,
| >
| > Steven Cheng
| > Microsoft Online Support
| >
| > Get Secure! www.microsoft.com/security
| > (This posting is provided "AS IS", with no warranties, and confers no
| > rights.)
| >
| >
| >
| > --------------------
| > | Thread-Topic: Can I use more than one style in a treeview control at
the
| > root no
| > | thread-index: AcYKQXFFHbLdIR2lT6KgIMpD2LxKyg==
| > | X-WBNR-Posting-Host: 24.87.190.40
| > | From: "=?Utf-8?B?cDN0M3I=?=" <P3***@newsgroups.nospam>
| > | Subject: Can I use more than one style in a treeview control at the
root
| > no
| > | Date: Mon, 26 Dec 2005 09:26:01 -0800
| > | Lines: 20
| > | Message-ID: <12**********************************@microsoft.co m>
| > | MIME-Version: 1.0
| > | Content-Type: text/plain;
| > | charset="Utf-8"
| > | Content-Transfer-Encoding: 7bit
| > | X-Newsreader: Microsoft CDO for Windows 2000
| > | Content-Class: urn:content-classes:message
| > | Importance: normal
| > | Priority: normal
| > | X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.0
| > | Newsgroups: microsoft.public.dotnet.framework.aspnet
| > | NNTP-Posting-Host: TK2MSFTNGXA03.phx.gbl 10.40.2.250
| > | Path:
TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA01.phx.gbl!TK2MSF TNGXA03.phx.gbl
| > | Xref: TK2MSFTNGXA02.phx.gbl
| > microsoft.public.dotnet.framework.aspnet:367074
| > | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| > |
| > | I have a treeview sourced from a SiteMap. I want to use 2 different
CSS
| > | styles for the root level nodes. The topmost root node should not
have a
| > top
| > | border, all the other root nodes should have a top border.
| > |
| > | Is it possible to have more than 1 style at the same level (parent
node)
| > | when using a SiteMap?
| > |
| > | I want it to appear something like this and I can only find a way to
| > either
| > | have the border on all root nodes or none at all. In addition to the
| > border,
| > | having a larger top margin on the other roots would also help the
| > appearance.
| > |
| > | root #1
| > | child 1.1
| > | child 1.2
| > | -----------------------
| > | root #2
| > | child 2.1
| > | -----------------------
| > | root #3
| > | child 3.1
| > |
| >
| >
|

Dec 28 '05 #6

P: n/a
TreeNode does not even have any style attributes like color, border, etc.?
Node only has ImageURL, NavigateURL, selectAction, etc properties, Am I
missing something here?

Thanks for your help

"Steven Cheng[MSFT]" wrote:
Hi Sandeep,

There is no Style property for individual TreeNode class object, we need to
set each specific style attributes like Color, Border...... manually when
we want to customize a certain Node ......

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
--------------------
| Thread-Topic: Can I use more than one style in a treeview control at the
roo
| thread-index: AcYLQB4fWyOFn3u/TXCPVaMnWO5DAg==
| X-WBNR-Posting-Host: 216.135.182.146
| From: "=?Utf-8?B?U2FuZGVlcA==?=" <Sa*****@discussions.microsoft.com>
| References: <12**********************************@microsoft.co m>
<kk**************@TK2MSFTNGXA02.phx.gbl>
| Subject: RE: Can I use more than one style in a treeview control at the
roo
| Date: Tue, 27 Dec 2005 15:49:03 -0800
| Lines: 93
| Message-ID: <B8**********************************@microsoft.co m>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.0
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: TK2MSFTNGXA03.phx.gbl 10.40.2.250
| Path: TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA03.phx.gbl
| Xref: TK2MSFTNGXA02.phx.gbl
microsoft.public.dotnet.framework.aspnet:367218
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| Hi Steven
|
| Can you post a code to override the style in the server-side? I have the
| same problem as p3t3r has.
|
| I tried to set TreeNodeStyle in the TreeNodeDataBound eventm but the
| TreeNode does not expose, so I could not set the style. How can i set the
| style, please help.
|
| Thanks
| Sandeep
|
| "Steven Cheng[MSFT]" wrote:
|
| > Hi P3T3R,
| >
| > Welcome to ASPNET newsgroup.
| > As for the ASP.NET 2.0 TreeView control, the TreeNode style is arranged
| > based on Node level. So far I think we can only use Level Info to
specify
| > different Styles for TreeNode (We can use the LevelStyles to apply
| > different styles for individule levels...). For your scenario,
there're
| > some certain TreeNodes in a certain Level which you want to do some
| > cutomization, I think you may consider using some of the TreeView's
Events,
| > like TreeNodeDataBound, and do the customization work for the certain
| > Nodes in that event... Or you can also use TreeView's DataBound event
| > (whicn fires after TreeView has been bound with data) or the PreRender
| > event and locate the Nodes and change the style of them there....
| >
| > Regards,
| >
| > Steven Cheng
| > Microsoft Online Support
| >
| > Get Secure! www.microsoft.com/security
| > (This posting is provided "AS IS", with no warranties, and confers no
| > rights.)
| >
| >
| >
| > --------------------
| > | Thread-Topic: Can I use more than one style in a treeview control at
the
| > root no
| > | thread-index: AcYKQXFFHbLdIR2lT6KgIMpD2LxKyg==
| > | X-WBNR-Posting-Host: 24.87.190.40
| > | From: "=?Utf-8?B?cDN0M3I=?=" <P3***@newsgroups.nospam>
| > | Subject: Can I use more than one style in a treeview control at the
root
| > no
| > | Date: Mon, 26 Dec 2005 09:26:01 -0800
| > | Lines: 20
| > | Message-ID: <12**********************************@microsoft.co m>
| > | MIME-Version: 1.0
| > | Content-Type: text/plain;
| > | charset="Utf-8"
| > | Content-Transfer-Encoding: 7bit
| > | X-Newsreader: Microsoft CDO for Windows 2000
| > | Content-Class: urn:content-classes:message
| > | Importance: normal
| > | Priority: normal
| > | X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.0
| > | Newsgroups: microsoft.public.dotnet.framework.aspnet
| > | NNTP-Posting-Host: TK2MSFTNGXA03.phx.gbl 10.40.2.250
| > | Path:
TK2MSFTNGXA02.phx.gbl!TK2MSFTNGXA01.phx.gbl!TK2MSF TNGXA03.phx.gbl
| > | Xref: TK2MSFTNGXA02.phx.gbl
| > microsoft.public.dotnet.framework.aspnet:367074
| > | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| > |
| > | I have a treeview sourced from a SiteMap. I want to use 2 different
CSS
| > | styles for the root level nodes. The topmost root node should not
have a
| > top
| > | border, all the other root nodes should have a top border.
| > |
| > | Is it possible to have more than 1 style at the same level (parent
node)
| > | when using a SiteMap?
| > |
| > | I want it to appear something like this and I can only find a way to
| > either
| > | have the border on all root nodes or none at all. In addition to the
| > border,
| > | having a larger top margin on the other roots would also help the
| > appearance.
| > |
| > | root #1
| > | child 1.1
| > | child 1.2
| > | -----------------------
| > | root #2
| > | child 2.1
| > | -----------------------
| > | root #3
| > | child 3.1
| > |
| >
| >
|

Dec 28 '05 #7

P: n/a
I decided to use the javascript version and there is just one slight change
to make it work. The root nodes are assigned to a class that causes the
border to appear. This style is set at the TD level, not the table level in
the release version of ASP.NET that I am using.

This javascript works and makes the menu look great, thank you.

window.onload=function(e){
var firstRootNode =
document.getElementById("TOC").getElementsByTagNam e("td")[0];
firstRootNode.style.borderTop = '0';

"p3t3r" wrote:
Both replies will be good enough to address the problem, thank you.

This is in a master page, and in a div for scrolling with only IE as the
target browser so either one will do.

"Phillip Williams" wrote:
In addition to the server side solution that Steven proposed, you might use a
client-side CSS or JavaScript (depending on your target browser for display).

Each TreeViewNode renders an HTML table object. If you were to enclose the
entire TreeView object in a div then you can style the first table (which is
the first node) within this div.

For example:
<div id="TOC">
<asp:TreeView ID="TreeView1" runat="server" >
<%--The implementation of the tree view --%>
</asp:TreeView>
</div>

Then you would add a Javascript similar to this:
<script language="Javascript">
window.onload=function(e){
var firstRootNode =
document.getElementById("TOC").getElementsByTagNam e("table")[0];
firstRootNode.style.borderTop = '0';
}
</script>

For browsers other than IE you might have used only pseudo classes, e.g.
#TOC table:first-child{border-top:0}

Unfortunately pseudo classes are not supported in IE.

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"p3t3r" wrote:
I have a treeview sourced from a SiteMap. I want to use 2 different CSS
styles for the root level nodes. The topmost root node should not have a top
border, all the other root nodes should have a top border.

Is it possible to have more than 1 style at the same level (parent node)
when using a SiteMap?

I want it to appear something like this and I can only find a way to either
have the border on all root nodes or none at all. In addition to the border,
having a larger top margin on the other roots would also help the appearance.

root #1
child 1.1
child 1.2
-----------------------
root #2
child 2.1
-----------------------
root #3
child 3.1

Dec 28 '05 #8

P: n/a
Here's the code I finally settled on. As an example of what it looks like, go
to the www.microsoft.com web site. Their menu on the left is just like what I
managed to achieve (note that the top root node has no border).

In the code, ctl00_tvMenu is the unqiue id of the generated div that
contains my menu (which has ID tvMenu).

window.onload=function(e){
var rootNodes = document.getElementById("TOC").getElementsByTagNam e("table");
for (i=1; i < rootNodes.length-1; i++) {
var rootNode = rootNodes.item(i) ;
if ( rootNode != null ) {
if ( rootNode.parentNode.id == "ctl00_tvMenu" ) {
rootNode.style.width = '100%';
rootNode.style.borderTop = 'darkgray 1px solid';
rootNode.style.marginTop = '10';
}
}
}
}

"p3t3r" wrote:
I decided to use the javascript version and there is just one slight change
to make it work. The root nodes are assigned to a class that causes the
border to appear. This style is set at the TD level, not the table level in
the release version of ASP.NET that I am using.

This javascript works and makes the menu look great, thank you.

window.onload=function(e){
var firstRootNode =
document.getElementById("TOC").getElementsByTagNam e("td")[0];
firstRootNode.style.borderTop = '0';

"p3t3r" wrote:
Both replies will be good enough to address the problem, thank you.

This is in a master page, and in a div for scrolling with only IE as the
target browser so either one will do.

"Phillip Williams" wrote:
In addition to the server side solution that Steven proposed, you might use a
client-side CSS or JavaScript (depending on your target browser for display).

Each TreeViewNode renders an HTML table object. If you were to enclose the
entire TreeView object in a div then you can style the first table (which is
the first node) within this div.

For example:
<div id="TOC">
<asp:TreeView ID="TreeView1" runat="server" >
<%--The implementation of the tree view --%>
</asp:TreeView>
</div>

Then you would add a Javascript similar to this:
<script language="Javascript">
window.onload=function(e){
var firstRootNode =
document.getElementById("TOC").getElementsByTagNam e("table")[0];
firstRootNode.style.borderTop = '0';
}
</script>

For browsers other than IE you might have used only pseudo classes, e.g.
#TOC table:first-child{border-top:0}

Unfortunately pseudo classes are not supported in IE.

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"p3t3r" wrote:

> I have a treeview sourced from a SiteMap. I want to use 2 different CSS
> styles for the root level nodes. The topmost root node should not have a top
> border, all the other root nodes should have a top border.
>
> Is it possible to have more than 1 style at the same level (parent node)
> when using a SiteMap?
>
> I want it to appear something like this and I can only find a way to either
> have the border on all root nodes or none at all. In addition to the border,
> having a larger top margin on the other roots would also help the appearance.
>
> root #1
> child 1.1
> child 1.2
> -----------------------
> root #2
> child 2.1
> -----------------------
> root #3
> child 3.1

Dec 28 '05 #9

P: n/a
I am glad you got it working.

However, you might have to debug it a bit more.

If you were to nest your master page within another master page then your
script will not work because the treeview will have a ClientID like this:
ctl00_ctl00_tvMenu

Also if Microsoft changes the format in which ASP.NET composes the ClientID
in another version then your Javascript will not work.

I recommended in my previous post adding an enclosing div tag to avoid
getting in manipulating the ClientID of the TreeView. However if you intend
to use the ClientID I would recommend some modification like this:

1- change the body tag to runat=server and give it an id, e.g. bodyOfMaster

2- handle the Page.PreRender event:

void Page_PreRender(object sender, EventArgs e)
{
HtmlGenericControl body =
(HtmlGenericControl)this.FindControl("bodyOfMaster ");
body.Attributes.Add("onload", "IdentifyTreeView('" + tvMenu.ClientID +
"');");
}

3- Modify the Javascript function like this:
function IdentifyTreeView(tvClientID)
{
var divTreeView = document.getElementById(tvClientID);
var rootNode= divTreeView.firstChild;
if (rootNode)
{
rootNode.style.width = '100%';
rootNode.style.borderTop = 'darkgray 1px solid';
rootNode.style.marginTop = '10';
}
}

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"p3t3r" wrote:
Here's the code I finally settled on. As an example of what it looks like, go
to the www.microsoft.com web site. Their menu on the left is just like what I
managed to achieve (note that the top root node has no border).

In the code, ctl00_tvMenu is the unqiue id of the generated div that
contains my menu (which has ID tvMenu).

window.onload=function(e){
var rootNodes = document.getElementById("TOC").getElementsByTagNam e("table");
for (i=1; i < rootNodes.length-1; i++) {
var rootNode = rootNodes.item(i) ;
if ( rootNode != null ) {
if ( rootNode.parentNode.id == "ctl00_tvMenu" ) {
rootNode.style.width = '100%';
rootNode.style.borderTop = 'darkgray 1px solid';
rootNode.style.marginTop = '10';
}
}
}
}

"p3t3r" wrote:
I decided to use the javascript version and there is just one slight change
to make it work. The root nodes are assigned to a class that causes the
border to appear. This style is set at the TD level, not the table level in
the release version of ASP.NET that I am using.

This javascript works and makes the menu look great, thank you.

window.onload=function(e){
var firstRootNode =
document.getElementById("TOC").getElementsByTagNam e("td")[0];
firstRootNode.style.borderTop = '0';

"p3t3r" wrote:
Both replies will be good enough to address the problem, thank you.

This is in a master page, and in a div for scrolling with only IE as the
target browser so either one will do.

"Phillip Williams" wrote:

> In addition to the server side solution that Steven proposed, you might use a
> client-side CSS or JavaScript (depending on your target browser for display).
>
> Each TreeViewNode renders an HTML table object. If you were to enclose the
> entire TreeView object in a div then you can style the first table (which is
> the first node) within this div.
>
> For example:
> <div id="TOC">
> <asp:TreeView ID="TreeView1" runat="server" >
> <%--The implementation of the tree view --%>
> </asp:TreeView>
> </div>
>
> Then you would add a Javascript similar to this:
> <script language="Javascript">
> window.onload=function(e){
> var firstRootNode =
> document.getElementById("TOC").getElementsByTagNam e("table")[0];
> firstRootNode.style.borderTop = '0';
> }
> </script>
>
> For browsers other than IE you might have used only pseudo classes, e.g.
> #TOC table:first-child{border-top:0}
>
> Unfortunately pseudo classes are not supported in IE.
>
> --
> HTH,
> Phillip Williams
> http://www.societopia.net
> http://www.webswapp.com
>
>
> "p3t3r" wrote:
>
> > I have a treeview sourced from a SiteMap. I want to use 2 different CSS
> > styles for the root level nodes. The topmost root node should not have a top
> > border, all the other root nodes should have a top border.
> >
> > Is it possible to have more than 1 style at the same level (parent node)
> > when using a SiteMap?
> >
> > I want it to appear something like this and I can only find a way to either
> > have the border on all root nodes or none at all. In addition to the border,
> > having a larger top margin on the other roots would also help the appearance.
> >
> > root #1
> > child 1.1
> > child 1.2
> > -----------------------
> > root #2
> > child 2.1
> > -----------------------
> > root #3
> > child 3.1

Dec 29 '05 #10

P: n/a
I just discovered the new syntax for the RegisterStartUpScript in version
2.0. It looks much better because it accepts a bool parameter to add the
script tags. So another sophisticated way of writing the code below (instead
of adding an attribute onload to the body tag) would be simpler:

void Page_PreRender(object sender, EventArgs e)
{
// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;
Type cstype = this.GetType();

// Check to see if the startup script is already registered.
if (!cs.IsStartupScriptRegistered(cstype, "tvMenuScript"))
{
String cstext = "IdentifyTreeView('" + tvMenu.ClientID + "');";
cs.RegisterStartupScript(cstype, "tvMenuScript", cstext, true);
}
}
--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"Phillip Williams" wrote:
I am glad you got it working.

However, you might have to debug it a bit more.

If you were to nest your master page within another master page then your
script will not work because the treeview will have a ClientID like this:
ctl00_ctl00_tvMenu

Also if Microsoft changes the format in which ASP.NET composes the ClientID
in another version then your Javascript will not work.

I recommended in my previous post adding an enclosing div tag to avoid
getting in manipulating the ClientID of the TreeView. However if you intend
to use the ClientID I would recommend some modification like this:

1- change the body tag to runat=server and give it an id, e.g. bodyOfMaster

2- handle the Page.PreRender event:

void Page_PreRender(object sender, EventArgs e)
{
HtmlGenericControl body =
(HtmlGenericControl)this.FindControl("bodyOfMaster ");
body.Attributes.Add("onload", "IdentifyTreeView('" + tvMenu.ClientID +
"');");
}

3- Modify the Javascript function like this:
function IdentifyTreeView(tvClientID)
{
var divTreeView = document.getElementById(tvClientID);
var rootNode= divTreeView.firstChild;
if (rootNode)
{
rootNode.style.width = '100%';
rootNode.style.borderTop = 'darkgray 1px solid';
rootNode.style.marginTop = '10';
}
}

--
HTH,
Phillip Williams
http://www.societopia.net
http://www.webswapp.com
"p3t3r" wrote:
Here's the code I finally settled on. As an example of what it looks like, go
to the www.microsoft.com web site. Their menu on the left is just like what I
managed to achieve (note that the top root node has no border).

In the code, ctl00_tvMenu is the unqiue id of the generated div that
contains my menu (which has ID tvMenu).

window.onload=function(e){
var rootNodes = document.getElementById("TOC").getElementsByTagNam e("table");
for (i=1; i < rootNodes.length-1; i++) {
var rootNode = rootNodes.item(i) ;
if ( rootNode != null ) {
if ( rootNode.parentNode.id == "ctl00_tvMenu" ) {
rootNode.style.width = '100%';
rootNode.style.borderTop = 'darkgray 1px solid';
rootNode.style.marginTop = '10';
}
}
}
}

"p3t3r" wrote:
I decided to use the javascript version and there is just one slight change
to make it work. The root nodes are assigned to a class that causes the
border to appear. This style is set at the TD level, not the table level in
the release version of ASP.NET that I am using.

This javascript works and makes the menu look great, thank you.

window.onload=function(e){
var firstRootNode =
document.getElementById("TOC").getElementsByTagNam e("td")[0];
firstRootNode.style.borderTop = '0';

"p3t3r" wrote:

> Both replies will be good enough to address the problem, thank you.
>
> This is in a master page, and in a div for scrolling with only IE as the
> target browser so either one will do.
>
> "Phillip Williams" wrote:
>
> > In addition to the server side solution that Steven proposed, you might use a
> > client-side CSS or JavaScript (depending on your target browser for display).
> >
> > Each TreeViewNode renders an HTML table object. If you were to enclose the
> > entire TreeView object in a div then you can style the first table (which is
> > the first node) within this div.
> >
> > For example:
> > <div id="TOC">
> > <asp:TreeView ID="TreeView1" runat="server" >
> > <%--The implementation of the tree view --%>
> > </asp:TreeView>
> > </div>
> >
> > Then you would add a Javascript similar to this:
> > <script language="Javascript">
> > window.onload=function(e){
> > var firstRootNode =
> > document.getElementById("TOC").getElementsByTagNam e("table")[0];
> > firstRootNode.style.borderTop = '0';
> > }
> > </script>
> >
> > For browsers other than IE you might have used only pseudo classes, e.g.
> > #TOC table:first-child{border-top:0}
> >
> > Unfortunately pseudo classes are not supported in IE.
> >
> > --
> > HTH,
> > Phillip Williams
> > http://www.societopia.net
> > http://www.webswapp.com
> >
> >
> > "p3t3r" wrote:
> >
> > > I have a treeview sourced from a SiteMap. I want to use 2 different CSS
> > > styles for the root level nodes. The topmost root node should not have a top
> > > border, all the other root nodes should have a top border.
> > >
> > > Is it possible to have more than 1 style at the same level (parent node)
> > > when using a SiteMap?
> > >
> > > I want it to appear something like this and I can only find a way to either
> > > have the border on all root nodes or none at all. In addition to the border,
> > > having a larger top margin on the other roots would also help the appearance.
> > >
> > > root #1
> > > child 1.1
> > > child 1.2
> > > -----------------------
> > > root #2
> > > child 2.1
> > > -----------------------
> > > root #3
> > > child 3.1

Dec 29 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.