Expanding a treeview without postback

[Mark Rae]

I've bound the tree to an XML datasource.

??? Why have you done that...??? The whole point of the way this works is
precisely *not* to populate the TreeView automatically by databinding...
Like I said, you need to add each node to the TreeView programatically. By
all means use an XML datasource if you like, but walk through its contents
in code, don't set it as the TreeView's 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.

No. You only set TreeNodeSelectedAction.Expand for nodes which have
children. Obviously, you don't set a NavigateURL property for these nodes...

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'?

No, it doesn't.

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?)

Exactly! You need only as many CSS classes as there are different formatting
styles...

 

[JJ]

Right, so I need to add the nodes one by one.
I can then set the primary CSS class for each node, based on its depth.

Based on the CSS, I can then set '.treeNodeCssClass:hover' style in my css
sheet. But how do I do the selected node?


As I said, using the treenode Id in the css sheet is impractible, so.....
Is it '.treeNodeCssClass:focus'?

Or can you create some sort of new treenode type for each depth that has its
own distinct css style (i.e. not using :hover, etc in the css sheet, but
specifiying it in the c# code) for hover, select etc ?

I must be close....surely....?



JJ

 

[Mark Rae]

Right, so I need to add the nodes one by one.
I can then set the primary CSS class for each node, based on its depth.

Absolutely correct.

Based on the CSS, I can then set '.treeNodeCssClass:hover' style in my css
sheet.

Correct again.

But how do I do the selected node?

I don't understand...

As I said, using the treenode Id in the css sheet is impractible, so.....
Is it '.treeNodeCssClass:focus'?

Again, I don't understand...

Or can you create some sort of new treenode type for each depth that has
its own distinct css style (i.e. not using :hover, etc in the css sheet,
but
specifiying it in the c# code) for hover, select etc ?

Once again, I'm not sure what you're getting at...

Try to take a bit of a step back here, and remember that TreeView nodes are
really nothing more than plain old hyperlinks... If you want a hyperlink to
look different when the mouse hovers over it, then you'd create a style
which did that - it's no different here...

I must be close....surely....?

Let's hope so...

 

[JJ]

I still can't get it. I must be on the wrong path totally.

The parent nodes I am making look like buttons.
I can, but using my new treenode class set the css style to change the
button's appearance on hover.
However, (and I am not using the expand/collapse images) I want the button
to look different again when it's expanded (or selected).

If there's a postback I can achieve this by iterating through the nodes when
a selection/expansion takes place.
But without a postback, I assume I need to somehow find out how css styles
can be applied to a 'selected' node or an 'expanded' node without refering
to the node's id in the css sheet, and without using c# code to find the
selected node and set the style (which would cause a postback, presumably)
??

I know I can use the css psuedo classes :focus, :hover, :active to set the
nodes (buttons) to change their look (without postback).

Does that make sense or are we talking about completely different
approaches?

JJ

 

[Mark Rae]

The parent nodes I am making look like buttons.
I can, but using my new treenode class set the css style to change the
button's appearance on hover.
However, (and I am not using the expand/collapse images) I want the button
to look different again when it's expanded (or selected).
Ah...right.

If there's a postback I can achieve this by iterating through the nodes
when a selection/expansion takes place.
But without a postback, I assume I need to somehow find out how css styles
can be applied to a 'selected' node or an 'expanded' node without refering
to the node's id in the css sheet, and without using c# code to find the
selected node and set the style (which would cause a postback, presumably)

Hmm - I've never tried that, but you *might* be able to add an "onclick"
attribute to those nodes with child nodes which would do this... Something
like:

objNode.Attributes.Add("onclick", "this.style='.....';");

However, I'm not sure if that would cancel the expanding and contracting of
the <div> with the child nodes...

 

[JJ]

Hi Mark (if you're still there ;-) )

Adding that attribute proved to be a bit of a problem, so I tried another
way, which I _think_ solves the problem:

I basically created a nested repeater, within a tag that had an ID that I
set. Using the repeater(s) item templates, I set out the repeater html like
a nested list. The repeater is databound.

I then used CSS to set the look of the outer repeater items (the 'parents')
and the inner items (the 'children') for both normal and hover events. The
tag which surrounded the children has its CSS attribute 'display' set to
none.

I then used simple javascript to set the onclick events for the parent to
change the CSS style of the tag surrounding the children to 'display=block'
and also to set the parent css style to one which represents its 'active'
state (and deactivate any others).

This approach gives me complete flexibility in the look of the 'nodes' and
so achieves (fingers firmaly crossed) my initial aims.
I would post code but I haven't quite finished it yet. Lets hope I'm not
speaking to soon....

JJ

 

[Mark Rae]

Hi Mark (if you're still there ;-) )
Hello...

This approach gives me complete flexibility in the look of the 'nodes' and
so achieves (fingers firmaly crossed) my initial aims.

Excellent! Glad you got it working...

Lets hope I'm not speaking to soon....