Expanding a treeview without postback

[JJ]

Is there any way you can expand a parent node on the treeview control
_without a postback_ by clicking on the node text (NOT clicking the expand
image URL) ?

I want to format the treeview node to look like a column of buttons that
expand to show the child nodes (if there are child nodes) qithout a
postback. I don't want to display the plus/minus or any other
expand/collapse graphic.

?

JJ

 

[Mark Rae]

Is there any way you can expand a parent node on the treeview control
_without a postback_ by clicking on the node text (NOT clicking the expand
image URL) ?

Set the node's SelectAction property to TreeNodeSelectAction.Expand
http://www.google.co.uk/search?sour...2006-28,GGLG:en&q=TreeNodeSelectAction.Expand

 

[JJ]

Thanks Mark.

Do you also know if you can format the hover styles for the parent and child
nodes differently? There only seems to be one 'HoverNodeStyle' for the
entire treeview.

If I want the parents to look like buttons and the children to look like
something else, there is the
<LevelStyles> tag, but it doens't have anything but a fixed style for each
level as far as I can see (i.e. no HoverStyle for each level).

I guess I could try to format the node as its databound, depending on its
depth?

JJ.

 

[Mark Rae]

Do you also know if you can format the hover styles for the parent and
child nodes differently?

Sorry - no idea...

I guess I could try to format the node as its databound, depending on its
depth?

That sounds like it should certainly work...

 

[JJ]

Without some pretty lengthy coding the treeview is proving a pain to format
for things like hovers, etc.

I think I'm going to look at the AJAX accordion control as another option
for a side menu. The idea I have is to use the Header panes for the Sub
Sections (the 'main' sections are in another menu). The content panes could
then have a repeater (for example) in there for and children that a Sub
Section may have.

The user would then click on the header and if there are any children, they
would be revealed below without a postback, if not, then the page is
refreshed with the required URL. In theory I hope I should have a lot more
flexibility over formatting than the Treeview or Menu control seems to
allow.

Sounds plausible?

Just downloading the latest AJAX Toolkit to try it out....

JJ

 

[Mark Rae]

Without some pretty lengthy coding the treeview is proving a pain to
format for things like hovers, etc.

I have no problems whatever doing this, although I always build up TreeViews
in code...

I just create CSS entries as required and apply whichever one I need to the
individual nodes as I add them to the TreeView...

I think I'm going to look at the AJAX accordion control as another option
for a side menu. The idea I have is to use the Header panes for the Sub
Sections (the 'main' sections are in another menu). The content panes
could then have a repeater (for example) in there for and children that a
Sub Section may have.

The user would then click on the header and if there are any children,
they would be revealed below without a postback, if not, then the page is
refreshed with the required URL. In theory I hope I should have a lot more
flexibility over formatting than the Treeview or Menu control seems to
allow.

Sounds plausible?

Plausible certainly...

Sounds like you're using a sledgehammer to crack a nut, though...

 

[JJ]

But would this work for hover buttons?

I want to create a virtical menu of button-style links, that I can set to
'selected', and that change their look when the mouse hovers over them.

If the second level nodes look differerent to the first, and you can only
set a hover style for the entire tree, I can't see how this can be achieved?

JJ

 

[JJ]

Mark,

Any chance you could give me some hints/snippets how you build up the
databound treeview and apply the CSS styles?
Maybe I can work out of there is some way I can do this.

Thanks,

JJ

 

[Mark Rae]

But would this work for hover buttons?

Obviously, a TreeView renders its nodes as hyperlinks, but it's a fairly
simple task to use CSS to make a hyperlink "look" like a button...

I want to create a virtical menu of button-style links, that I can set to
'selected', and that change their look when the mouse hovers over them.
OK.

If the second level nodes look differerent to the first, and you can only
set a hover style for the entire tree, I can't see how this can be
achieved?

But that's the whole point! I'm *not* setting a hover style for the entire
tree... As I said, "I just create CSS entries as required and apply
whichever one I need to the
individual nodes as I add them to the TreeView..."

 

[JJ]

Right. So what I think you're saying is:

1. Add the nodes one by one then set the CSS style of each level
2. Use CSS to set the hover, focus, on attributes.

Now I just how to work out how to set the CSS style of each node databound
node.

JJ

 

[JJ]

Right. So what I think you're saying is:

1. Add the nodes one by one then set the CSS style of each level
2. Use CSS to set the hover, focus, on attributes.

Now I just how to work out how to set the CSS style of each node databound
node.

JJ

 

[Mark Rae]

Any chance you could give me some hints/snippets how you build up the
databound treeview and apply the CSS styles?

I used this as a starting point:
http://fredrik.nsquared2.com/viewpost.aspx?PostID=299

And them modified it to my own needs...

The following article shows a similar modification:
http://forums.asp.net/1152605/ShowPost.aspx

 

[JJ]

Thanks very much. I will post back if/when I achieve what is clearly simple
but has got me totally going around in circles.

I'll postpone my first adventure with AJAX for now...

JJ

 

[Mark Rae]

1. Add the nodes one by one then set the CSS style of each level

Forget levels - set the style on a node by node basis... Chances are that
this will be tantamount to the same thing, but ignore LevelStyles
completely...

2. Use CSS to set the hover, focus, on attributes.

Correct.

 

[Mark Rae]

Thanks very much. I will post back if/when I achieve what is clearly
simple but has got me totally going around in circles.

It's only simple if you know how... As I said, I didn't figure this out
for myself either - sometimes the key to being an efficient developer is
knowing how to use someone else's hard work... ;-)

I'll postpone my first adventure with AJAX for now...

Don't get me wrong - AJAX is superb technology, and would no doubt provide
you with your solution here...

However, for this particular issue, it's simply not necessary...

 

[JJ]

Mark,

Works like a dream.The RenderPreText and RenderPostText overrides make the
treeview formatting much more flexible.

I'll point anyone who comes across this thread with a similar issue to Marks
earlier link:
http://fredrik.nsquared2.com/viewpost.aspx?PostID=299

and additionally I found this one, for more examples:
http://weblogs.asp.net/dannychen/archive/2006/01/25/436454.aspx

Mark, thanks (again) for saving me a great deal of time.

JJ

 

[Mark Rae]

Works like a dream
Hurrah!

Mark, thanks (again) for saving me a great deal of time.

No problem.

 

[JJ]

Mark, sorry to revisit this one, but....

Did you manage to change the selected CSS style of the treeviews selected
node without a postback?

JJ

 

[Mark Rae]

Mark, sorry to revisit this one, but....

Did you manage to change the selected CSS style of the treeviews selected
node without a postback?

??? I've never even tried that... As I said, I use the code I gave you to
add the nodes to the TreeView individually when the page loads, specifying
the style for each node as required - I'm not actually trying to change the
style of an individual node on the fly after the page has loaded...

Is that what you're trying to do...?

 

[JJ]

No - I think I worded that wrongly.

What I meant was this:

I've bound the tree to an XML datasource.
I don't want the page to refresh when the user clicks on any of the nodes
that have children (I just want the node to expand without a postback).
I was setting the css style of the node when the treeviews selected node was
changed (i.e. parsing through the nodes and if one is selected then settting
the CSS class). This would presumably cause a postback even if I have set
TreeNodeSelectedAction.Expand for each node so this is not the right way to
do it.

So, trying to achieve this via pure css, (and my CSS knowledge is not great
but ...) when a treenode is selected, does it's css class become
'.treeNodeCssClass.on'?
Or does is need to be '#treenodeId.on' ? ( - that can't be the right way as
I'd have to set up a CSS class for every node that could be selected based
on its ID wouldn't I?)

JJ