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

[Guest]

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

 

[Steven Cheng[MSFT]]

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=?=" <[email protected]>
| 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: <[email protected]>
| 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!TK2MSFTNGXA03.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
|

 

[Guest]

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").getElementsByTagName("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.

 

[Guest]

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.

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").getElementsByTagName("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.

 

[Guest]

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

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==?=" <[email protected]>
| References: <[email protected]>
<[email protected]>
| 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: <[email protected]>
| 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=?=" <[email protected]>
| > | 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: <[email protected]>
| > | 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!TK2MSFTNGXA03.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
| > |
| >
| >
|

 

[Guest]

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

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==?=" <[email protected]>
| References: <[email protected]>
<[email protected]>
| 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: <[email protected]>
| 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=?=" <[email protected]>
| > | 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: <[email protected]>
| > | 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!TK2MSFTNGXA03.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
| > |
| >
| >
|

 

[Guest]

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").getElementsByTagName("td")[0];
firstRootNode.style.borderTop = '0';

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.

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").getElementsByTagName("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

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

 

[Guest]

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").getElementsByTagName("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';
}
}
}
}

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").getElementsByTagName("td")[0];
firstRootNode.style.borderTop = '0';

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.

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").getElementsByTagName("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


:

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

 

[Guest]

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

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").getElementsByTagName("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';
}
}
}
}

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").getElementsByTagName("td")[0];
firstRootNode.style.borderTop = '0';

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.

:

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").getElementsByTagName("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


:

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

 

[Guest]

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

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

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").getElementsByTagName("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';
}
}
}
}

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").getElementsByTagName("td")[0];
firstRootNode.style.borderTop = '0';



:

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.

:

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").getElementsByTagName("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


:

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