472,784 Members | 953 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,784 software developers and data experts.

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

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
10 2268
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: imassadpk | last post by:
Hi all, Apprecite your help in resolving this tricky issue... I am trying implementing Recurrsive TreeView in MS. Access 2003 ADP project. So far, no luck :( The Problem: This sample...
3
by: Steve Richter | last post by:
in windows explorer, the nodes immed under the "my computer" root node appear with a minimum of indenting ( the +/- square is directly underneath the root node ). In the .NET TreeView control the...
0
by: DKode | last post by:
Ok, I am creating a directory browsing app and am using the obout.com TreeView control. This is exactly what I was looking for, as of right now my code is quite sloppy and I plan on cleaning it...
14
by: Evan Kontos | last post by:
I am trying to implement a Treeview w/an XML file and I even copied and pasted examples from MSDN but can't get them to work. Any suggestions welcome. XML File <TREENODES> <TREENODE...
8
by: Don Wash | last post by:
Hi There! I'm using VB.NET to create a TreeView application and unfortunately I could not find "Key" property in Node items of the TreeView. We used to have "Key" property in TreeView node...
2
by: Kristopher Wragg | last post by:
I'm having some serious problems with the TreeView control. I've got a control that inherits TreeView and has some methods that firstly create a TreeNode then does some recursive procedure to add...
4
by: Henry | last post by:
Does anybody have a real-world sample of buiding a treeview control using data from database tables? All the sample code I have found either builds the treeview manually or uses a file directory...
0
by: michael.neel | last post by:
How do you set a node's style (font, css class, etc) dynamically? This seemed like it would be simple, but I cannot find an event, method, or property of a node available at run time that contains...
1
by: JRSofty | last post by:
Hi everyone, I've gotten myself is bit of a mess where I'm loading a treeview. Basically I initialize the treeview control with a single root node we'll call it root. I do this by using the...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: lllomh | last post by:
How does React native implement an English player?
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.