|
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
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, The correct function name is searchItem sById, 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!
|
|
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.aspxI'll try it out at work tomorrow.
|
|
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!
|
|
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
|
|
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.aspxThanks!
|
|
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.
|
|
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.aspx2. 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!
|
|
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
|
|
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.
|
|
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!
|
|
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>
|
|
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.
|
|