|
|
Rank: Member
Groups: Member
Joined: 5/26/2008
Posts: 22
|
Hi,
I am just working on a project that your product seems to fit all aspects perfectly except for this one. I'm hoping that there is a solution for this.
I have a treeview that has three levels (1,2,3).
I want to add a control the website with the options A and B. When the user selects option A then all three levels are shown in the treeview, but if the user selects B then only two levels are shown (1,2). I need all this to be done on the client side. Any advice you can give me would be greatly appreciated.
Thanks,
Paul
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, You can do that with client side JavaScript except for a small issue (which we will fix soon):
Code: JavaScript
//Show/hide all nodes on a certain level
function toggleLevel(group, level, show)
{
for (var i = 0; i < group.getItemCount(); i++)
{
var item = group.getItemByIndex(i);
if (group.getLevel() == level)
item.setVisible(show);
else
{
var subGroup = item.getSubGroup();
if (subGroup)
toggleLevel(subGroup, level, show);
}
}
}
Code: HTML/ASPX
<div onclick="toggleLevel(eo_GetObject('TreeView1').getTopGroup(), 2, false);">
Hide</div>
<div onclick="toggleLevel(eo_GetObject('TreeView1').getTopGroup(), 2, true);">
Show</div>
The above code works fine to hide/show all nodes on a certain level (and below). But it does not update the line images. The line images will be automatically updated when user moves mouse over it. So this works best for you if you do not use line images (by setting LineImagess.Visible to false). Another way is to do it on the server side through an AJAX call. Since the update is down through an AJAX call, you avoid a full page reload, thus the user experience is very close to what you get with pure client side JavaScript: 1. Put a CallbackPanel in the page; 2. Put the TreeView inside the CallbackPanel; 3. Set the otpion buttons as triggers of the CallbackPanel; 4. Handling the option buttons' server side click/change event to repopulate the TreeView; This way when user clicks the option button, an AJAX call is triggered and the TreeView is updated without reloading the whole page, which gives similar result as client side script. Hope this helps. Thanks
|
|
Rank: Member
Groups: Member
Joined: 5/26/2008
Posts: 22
|
Hi,
I tried this the first way and it seems there were some issues with it getting confused. Depending on what was expanded eventually it got out of sync. So I moved onto the second method. I have the CallbackPanel firing and I am handling the event, however I can't seem to make the TreeView change. Everything I have tried the Tree stills stays the same. Is there a special way to get the TreeView to redraw?
Thanks,
Paul
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Paul,
Everything inside the CallbackPanel is automatically redraw. So make sure the TreeView is placed inside the CallbackPanel.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 5/26/2008
Posts: 22
|
Hi,
What I tried to do is rebind the datasource to a new table. Will this work or will I have to do it another way? My TreeView is in the CallbackPanel. I have copied the code from one of your examples. Everything seems to work but the refresh.
Thanks,
Paul
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Rebinding the data source should work. Make sure you call DataBind() explicitly.
Let us know if the problem persists. In that case we will need either to see the problem on your machine (we do that through web meetings), or need you to produce a sample page for us to reproduce the problem in our environment. As soon as we can see the problem, it should be fairly easy to find out the root cause.
|
|
Rank: Member
Groups: Member
Joined: 5/26/2008
Posts: 22
|
Okay then, I cleaned up some code and now it was working. Sorry for causing any problems I must of been doing something weird. I have one more question, which I am not sure if it is possible or not but I thought I'd ask. If you have the 3 levels (1,2,3) is there anyway you can limit entry so that if there is a level 3 checked no other level 3 can be checked unless it resides under the same level 2?
IE
A
a
1
2
3
b
4
5
6
If you have checked 2 already then if you goto check 4 it prevents it?
Thanks again for all your help, your product is great!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Yes. You can do that by handling ClientSideOnCheckStateChanging event. It will be something like this:
Code: HTML/ASPX
<eo:TreeView ClientSideOnCheckStateChanging="on_checkstate_changing" ...>
.....
</eo:TreeView>
Code: JavaScript
function on_checkstate_changing(
treeView, node, oldCheckState, newCheckState)
{
//Check whether any sibling node is checked
var parentGroup = node.getParentGroup();
for (var i = 0; i < parentGroup.getItemCount(); i++)
{
var child = parentGroup.getItemByIndex(i);
if ((child != node) && child.getChecked())
{
//Return false to prevent this node to be
//checked if we see any other sibling is
//checked
return false;
}
}
//Proceed to check this item
return true;
}
This way the TreeView calls on_checkstate_changing every time a node is about to be checked. This function checks all sibling nodes and returns false if it sees any sibling node is checked. Returning false from this function prevents the node to be checked. Thanks
|
|
Rank: Member
Groups: Member
Joined: 5/26/2008
Posts: 22
|
Great everything works perfectly. Thanks for your help.
|
|