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:
[color=blue]
> 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:
>[color=green]
> > 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:
> >[color=darkred]
> > > 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[/color][/color][/color]
