Forum
Log In
Home
Topic RSS
20:54
15/10/2010
Offline
What is the correct way to code the root node of a JSON, AJAX-loaded tree to render with only the root node expanded? I tried various combinations of expandRow(), expandNode(), and click(), but I couldn't get any of them to work. Most of my attempts have been inside the gridComplete() handler.
22:11
13/04/2010
Offline
terryg said:What is the correct way to code the root node of a JSON, AJAX-loaded tree to render with only the root node expanded? I tried various combinations of expandRow(), expandNode(), and click(), but I couldn't get any of them to work. Most of my attempts have been inside the gridComplete() handler.
This method worked for me. I hope it helps: (not sure why the expandRow and expandNode only work within the setTimeout function)
var mygrid = jQuery('#grid').jqGrid({
...
gridComplete: function() {
var rData = mygrid.jqGrid('getGridParam', 'data');
if(rData[0]){
setTimeout(function(){
$empList.expandRow(rData[0]);
$empList.expandNode(rData[0]);
}, 0);
}
},
12:40
05/05/2011
Offline
I tried but no is rows are expanded.
How $empList is defined ?
Andrus.
13:25
08/05/2011
Offline
$emplist should be replaced by mylist, I think.
13:33
08/05/2011
Offline
Coincidently I spend the last night also wondering how to have a single tree expanded right after loading the page.
My solution was like this. It also needs this magical setTimeoutFunction(... , 0) which I cannot quite make sense of but then uses
the .click() function to avoid trying to figure out which jqGrid API functions are neccessary:
gridComplete: function() {
setTimeout(function(){
autoClicked = [<?php echo $autoClicked ?>];
jQuery.each(autoClicked, function(index, value) {
jQuery('#' + value + ' td div').click();
});
}, 0);
}
The autoClicked variable gets a list of nodes e.g. [3, 5, 8] that should be opened ("clicked as by the user") in exactly this order.
The page load then produces 4 AJAX requests, the first for the root and then the 3 which I faked.
Not using the jqGrid API means that you have to rely on this "#id td div" selector not to change though.
But can anybody explain the setTimeout() with the 0 seconds parameter, please? It just does not work without even if the loadComplete or gridComplete hooks should have the rest of the grid loaded at that time.
14:31
08/05/2011
Offline
Hm.. the approach with .click() does not seem to be reliable when using a dynamically loaded tree in opposite to one where the whole data is send immediately. So I've come up with a better solution. Still I don't understand why the setTimeout() function seems absolutely neccessary to make it work.
As only the nodes of the top level and then the explicitly requested are available, the "path" from top to the requested node has to be defined in the Javascript page e.g. by PHP:
autoClicked = [5, 7, 8]; // global "todo" list
then a gridLoaded function has to be defined for the grid. When first loaded this function triggers the expansion of node 5. After that node is rendered the function is called again. Now it opens id=5. After that id=8. Then the queue is empty and the page has the complette tree down to id=8 open!
jQuery(document).ready(function() {
var mygrid = jQuery("#treegrid2").jqGrid({
....
gridComplete: function() {
// * This function is called everytime a node is expanded and not
// only once after the page is loaded. Therefore only one node
// at a time can be expanded and we need a global "todo list".
// * getRowData() returns the data as set by the server without some
// internally added attributes which expandNode() relies on.
// Therefore getGridParam() has to be used.
// * When using a dynamical loaded tree the position of a specific
// id in the data array cannot easily be precalucated by the server
// therefore we search for the id in a loop every time.
setTimeout(function() {
var id = autoClicked.shift();
var mygrid = jQuery('#treegrid2');
var rData = mygrid.getGridParam('data');
var data = null;
for (var i=0; i < rData.length; i++) {
if (id == rData[i].id) {
data = rData[i];
break;
}
}
mygrid.expandRow(data);
mygrid.expandNode(data);
mygrid.setSelection(id);
}, 0);
}
16:48
05/05/2011
Offline
Application loads new page on every node (leaf or non-leaf click ) using
onSelectRow: function (rowid) {
var treedata = grid.jqGrid('getRowData', rowid);
window.location = '<%= ResolveUrl("~/")%>' + treedata.url;
}
setSelection in your code probably causes this event. This event causes your code call which causes this event again etc. Treegrid flashes forever in this case. How to fix ?
Andrus.
17:07
05/05/2011
Offline
I also notices that even without
setSelection
this method causes ugly tree flashing: tree disappears first and appear afterwards incrementally. How to remove this flash ? Should we hide tree and show it only after it is fully constructed or other idea ?
Andrus.
17:33
05/05/2011
Offline
The other possibility is to provide data for selected leaf and setting expanded and loaded properties to true for this path. In this case proper tree is loaded using single server request. Ides from /blog/?page_id=393/treegrid/jqgrid-4-adjacency-model-expanded_field-problem/ can used.
Andrus.
Most Users Ever Online: 715
Currently Online:
35 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
