Andrus.

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.

                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.

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

}

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.

How $empList is defined ?

Andrus.

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)