Welcome Guest Search | Active Topics | Sign In | Register

Problem selecting a node from Javascript Options
John
Posted: Wednesday, March 31, 2010 3:48:48 AM
Rank: Member
Groups: Member

Joined: 3/31/2010
Posts: 11
I’ve been reviewing your web controls to ensure we can replace our current treeview before purchasing the corporate license. So far everything works great except for one critical issue

No matter what I do I cannot seem to select a node in the treeview using javascript. The closest I can come to is using fintItem however that requires a path and the rest of the application/site has no idea what the path in the treeview is. Our old treeview component could do a search by id which was perfect. I have tried the below code which I found in the forum however it does not work

function GoToNode(itemId)
{
var nodes = TreeView1.searchItemById(itemId);
if (nodes.length > 0)
nodes[0].click();
}

This can’t find TreeView1 even though that is the ID of the component so I changed it to

function GoToNode(itemId)
{ var treeView = eo_GetObject("TreeView1");
var nodes = treeView.searchItemById(itemId);
if (nodes.length > 0)
nodes[0].click();
}

However this give a “Obect doesn’t support this property or method” error on searchItemByID
Code: JavaScript
Code: JavaScript
eo_support
Posted: Wednesday, March 31, 2010 7:19:18 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

The correct function name is searchItemsById, not searchItemById. The following code should do what you wanted:

Code: JavaScript
function selectNode(itemId)
{
    //Get the TreeView object
    var treeView = eo_GetObject("TreeView1");
    
    //Find the node by ID
    var nodes = treeView.searchItemsById(itemId); 
    if (nodes.length > 0) 
    {
        var node = nodes[0];
        
        //Make sure the node is visible. This includes
        //expanding all parent items and also scrolling
        //the node into view
        node.expandPath();
        node.ensureVisible();
        
        //Now select the node
        treeView.setSelectedNode(node);
    }
}


Note a few additional lines were added to make sure the node is visible before you select it (you could select it without making sure it's visible but then you won't see it even it is selected).

Please feel free to let us know if you have any more question.

Thanks!
John
Posted: Wednesday, March 31, 2010 7:45:46 AM
Rank: Member
Groups: Member

Joined: 3/31/2010
Posts: 11
Ahh. Ok thanks. I cut and pasted it from this thread

http://www.essentialobjects.com/forum/postst910_TreeView--Hyperlink-to-Node.aspx

I'll try it out at work tomorrow.
eo_support
Posted: Wednesday, March 31, 2010 7:54:36 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Sorry about the error in the previous post. We have verified the above code with the latest version here, so we believe it will work for you. However please feel free to let us know if you run into any issues or have any other questions.

Thanks!
John
Posted: Wednesday, March 31, 2010 8:59:03 PM
Rank: Member
Groups: Member

Joined: 3/31/2010
Posts: 11
Ok that worked.

One more slight problem. The tree I am displaying has about 2000 - 5000 rows and is displayed in a frame on the left side of the page. I want the tree to take up the entire frame regardless of how or when the page is resized. If I set the width to a large number and height to 100% the tree lets the frame do the scrolling which is fine however the node.ensureVisible(); does not work in this case, I assume because it thinks the tree is fully visible on the page and does not take into account the frames scroll possition.

So I tried setting the scroll on the frame off and let the treeview do the scrolling. However now I have to set the size of the tree exactly to fit the frame. So my question is how can I change the size of the tree using javascript

var treeView = eo_GetObject("TreeView13");
treeView.width=100;
treeView.height=100;

the above does not seem to work
eo_support
Posted: Wednesday, March 31, 2010 9:05:01 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Glad to hear our previous reply works for you. You will need to call setSize for that. Here is the reference for this method:

http://doc.essentialobjects.com/library/1/jsdoc.public.control.setsize.aspx

Thanks!
John
Posted: Wednesday, March 31, 2010 9:07:57 PM
Rank: Member
Groups: Member

Joined: 3/31/2010
Posts: 11
Another quickie.
Due to the size of the list I am trying to pre populate the first 2 levels and then let the ondemand loading handle the others. This works well for browsing however not with the search. I know understand that I will not be able to search for an item that isn’t loaded yet and have handled that however it would be nice if the treeView.setSelectedNode(node); Could initiate a load event so that the next level down could be loaded.
eo_support
Posted: Wednesday, March 31, 2010 9:32:12 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

I believe what you wanted to do is possible but unfortunately it is not built-in. So it will require some extra code. The key functions that you will use are:

1. treeNode.populateOnDemand method. This function manually triggers populate on demand. You will need to call this function to load child nodes if they are not loaded yet (see #3 below). Here is the doc for this function:

http://doc.essentialobjects.com/library/1/jsdoc.public.treenode.populateondemand.aspx

2. If the node that you want to reach is deep inside, you will need to call populateOnDemand multiple times until you reach down to your node. However you can not call them all at once. You must wait for the previous populateOnDemand to finish before you start the next one. In order to do this you will need to handle the TreeView's ClientSideAfterPopulate event. It will be something like this:

Code: HTML/ASPX
<eo:TreeView ClientSideAfterPopulate="after_populate_handler" ...>
....
</eo:TreeView>


Code: JavaScript
function after_populate_handler(treeView, node)
{
    //Mark this node as populated
    node.hasPopulated = true;

    setTimeout(function()
    {
        //Figure out whether you need to make 
        //the next populateOnDemand call
        ....
    }, 10);
}


Function after_populate_handle is called when a populate on demand is done. Inside the handler you would check to see whether you need to go deeper. Note that the actual call is delayed by a timer so that the previous populate on demand cycle can clean up before the next one is started.

3. The TreeNode remembers whether it has been populated. However there is no public API for you to query this information. So if you need that information, you will need to mark a node as has been populated inside your after_populate_handler (as demonstrated in the code above). You may need to know whether a node has been populated because populateOnDemand returns immediately if it sees a node has already been populated, thus in that case will not trigger after_populate_handler;

Once you put these three pieces together it should do what needed for you.

Thanks!
John
Posted: Wednesday, March 31, 2010 10:06:32 PM
Rank: Member
Groups: Member

Joined: 3/31/2010
Posts: 11
Ok so if I understand correctly if I use the following code then when it finds a node it should populate it with its direct children correct? At this stage I am not concerned with any nodes underneath that one.

function selectNode(itemId)
{
//Get the TreeView object

var treeView = eo_GetObject("TreeView13");

//Find the node by ID
var nodes = treeView.searchItemsById(itemId);
if (nodes.length > 0)
{

var node = nodes[0];

//Make sure the node is visible. This includes
//expanding all parent items and also scrolling
//the node into view
node.expandPath();
node.ensureVisible();

//Now select the node
treeView.setSelectedNode(node);
node.populateOnDemand();
}
}


Unfortunately it does not seem to work so I must have something wrong. One part is the doco does not explain much about the args property other than to say "Optional arguments to be passed to the server" so I assume I can leave it blank
John
Posted: Wednesday, March 31, 2010 10:11:52 PM
Rank: Member
Groups: Member

Joined: 3/31/2010
Posts: 11
Ok solved the problem myself. Moved the populate on demand line up in the code and all works.
eo_support
Posted: Wednesday, March 31, 2010 10:15:07 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Great. Thanks for the update. The "optional arguments" is for you own use. It's a pass through parameter. We carry it to your server side ItemPopulate handler and you use it whatever way you would like. We do not use or interpret it in any way.

Thanks!
John
Posted: Wednesday, March 31, 2010 10:15:27 PM
Rank: Member
Groups: Member

Joined: 3/31/2010
Posts: 11
Well that's me done. Does everything I need to now so I'm off to the accountant to get a corporate license paid for.

BTW if anyone is interested, Below is the code to autoresize the treeview to the full size of a frame and should work with any browser

<script>
function alertSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var treeView = eo_GetObject("TreeView13");
treeView.setSize(myWidth,myHeight);
}

alertSize();

</script>
eo_support
Posted: Wednesday, March 31, 2010 10:28:23 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Great. Thank you very much for your business and also for sharing the code! Please feel free to let us know if you have any more questions.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.