Dojo TreeGrid & Find Task example

[Salomon_VágadalJoensen]

I've built upon the Find Task example given in the ArcGIS API for JavaScript:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/find_map.html

Where not only does the Find Task return Values in a map service but also made it possible to click through examples that will return that geometry's values map extent.

However, the Find Task returns polygons from the map service that have the same Value, e.g. one road with 5 polygons will return 5 values, when I'm only interested in that one road.

For aesthetic reasons, I want it to return a collapsed tree where its children are all the results and the root is one result returned from the Find Task.

This is where dojo's TreeGrid comes in.

I've looked at the syntax and structure of the dojo TreeGrid, and I'm at a loss how to plug in the Find Task into returning results in a TreeGrid.



BTW, the code snippet that I've written that returns the map extent is built upon this:

NOTE: the 4th (0-index) value is           dataForGrid.push([result.layerName, result.foundFieldName, result.value, result.geometry, result.feature.geometry.getExtent()]);

  dojo.connect(grid, 'onRowClick', function(evt) {
  
  var kannar_xmin = new Array();
  var kannar_ymin = new Array();
  var kannar_xmax = new Array();
  var kannar_ymax = new Array();
  var extt;
  
  if (grid.selection) {
            // Get all selected items from the Grid:
            var items = grid.selection.getSelected();
   
            if (items.length) {
                // Iterate through the list of selected items.
                // The current item is available in the variable
                // "selectedItem" within the following function:
       
                dojo.forEach(items, function(selectedItem) {
                    if (selectedItem !== null) {
      extt = grid.store.getValues(selectedItem, "4")[0];
      
      // use the initial selected extent 
      kannar_xmin = [grid.store.getValues(selectedItem, "4")[0].xmin];
      kannar_ymin = [grid.store.getValues(selectedItem, "4")[0].ymin];
      kannar_xmax = [grid.store.getValues(selectedItem, "4")[0].xmax];
      kannar_ymax = [grid.store.getValues(selectedItem, "4")[0].ymax];
                    } // end if

     //examine for lowest and highest extent within 10km
     for (var k=0; k<grid._by_idx.length; k++) {
      if (
      ( grid.store.getValues(selectedItem, "2")[0] === grid._by_idx.item[2][0]) &&
      (10000 > (Math.abs(grid.store.getValues(selectedItem, "4")[0].xmin - grid._by_idx.item[4][0].xmin))) &&
      (10000 > (Math.abs(grid.store.getValues(selectedItem, "4")[0].ymin - grid._by_idx.item[4][0].ymin))) &&
      (10000 > (Math.abs(grid.store.getValues(selectedItem, "4")[0].xmax - grid._by_idx.item[4][0].xmax))) &&
      (10000 > (Math.abs(grid.store.getValues(selectedItem, "4")[0].ymax - grid._by_idx.item[4][0].ymax))) )
      {
      
      for (var i=0; i<(grid._by_idx.length); i++) {
        if ( 
        (10000 > (Math.abs(grid._by_idx.item[4][0].xmin - grid._by_idx.item[4][0].xmin))) &&
        (10000 > (Math.abs(grid._by_idx.item[4][0].ymin - grid._by_idx.item[4][0].ymin))) &&
        (10000 > (Math.abs(grid._by_idx.item[4][0].xmax - grid._by_idx.item[4][0].xmax))) &&
        (10000 > (Math.abs(grid._by_idx.item[4][0].ymax - grid._by_idx.item[4][0].ymax))) ) 
        {
         //build temporary 'kannar_' array for checking lowest and highest value out from the IF conditions
         kannar_xmin.push(grid._by_idx.item[4][0].xmin);
         kannar_ymin.push(grid._by_idx.item[4][0].ymin);
         kannar_xmax.push(grid._by_idx.item[4][0].xmax);
         kannar_ymax.push(grid._by_idx.item[4][0].ymax);
        }

       }
      
      }

     }
     
     // examine xmin
     extt.xmin = kannar_xmin.min();
      
     // examine ymin
     extt.ymin = kannar_ymin.min();
     
     // examine xmax
     extt.xmax = kannar_xmax.max();     
    
     // examine ymax
     extt.ymax = kannar_ymax.max();

     // if extt is not defined, then use the selected value as extent
     if (extt.xmin === undefined)
     {
      extt = grid.store.getValues(selectedItem, "4")[0];
      alert("xmin:  " + extt.xmin + " , _partwise:  " + extt._partwise);
     }
     
                }); // end forEach
            } // end if
  } //end if onClick
  
  map.setExtent(extt.expand(2));
  });

the min and max function calls are:

 // function for finding highest value of an array with a for loop  
 Array.prototype.max = function() {
  var max = this[0];
  var len = this.length;
  for (var j = 1; j < len; j++) if (this > max) max = this;
  return max;
 }
 
 
 // function for finding lowest value of an array with a for loop
 Array.prototype.min = function() {
  var min = this[0];
  var len = this.length;
  for (var j = 1; j < len; j++) if (this < min) min = this;
  return min;
 }

If I have to submit further explanation on my issue, please let me know.

[Salomon_VágadalJoensen]

Well, I've made 'some' progress, where I've figured out how to make a new grid with the TreeGrid structure. However, I run into a TypeError that confuses me and I am unable to find where the faults lies.

   grid1 = new dojo.data.ItemFileWriteStore({ data: data });
  console.log(grid1);
  
  function ValueTotal(value, rowIdx){
   return summaryFormatter(value, rowIdx, this, "Value", "Values");
  }
  
  dojo.addOnLoad(function(){
   g = new dojox.grid.TreeGrid({
    structure: [ 
     { cells: [
      [ 
       { field: "0", name: "Layer Name", 
        children: [
         { field: "1", name: "Field Name" }, 
         { field: "2", name: "Value", formatter: ValueTotal}
        ], 
        itemAggregates: [ "totValue" ], 
        aggregate: "cnt"
       }
      ]] 
     }     
    ],
    store: grid1,
    query: {id: "*"},
    queryOptions: {deep: true},
    rowSelector: true,
   }, dojo.byId("progGrid"));
   dojo.addClass(g.domNode, "grid");
   g.startup();
   dojo.connect(window, "onresize", grid, "resize");
  });

The error displayed in Chrome says that it is of a 'type: "non_object_property_store"' and the argument is "isCollapsable" is undefined. Where or how do I define isCollapsable?

EDIT: I find the comparable code from: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_treegrid.html

[Salomon_VágadalJoensen]

Well, I've yet to get TreeGrid to work, so instead I've utilized some 'dirty' code to hide duplicate  values

  for (var i = 0; grid._by_idx.length > i; i++) {
   for (var k = i + 1; grid._by_idx.length > k;k++) {
    if (( (grid._by_idx.item[2][0] === grid._by_idx.item[2][0]) &&
    (grid._by_idx.item[1][0] === grid._by_idx.item[1][0]) 
    ) && (
    (10000 > (Math.abs(grid._by_idx.item[4][0].xmin - grid._by_idx.item[4][0].xmin))) &&
    (10000 > (Math.abs(grid._by_idx.item[4][0].ymin - grid._by_idx.item[4][0].ymin))) &&
    (10000 > (Math.abs(grid._by_idx.item[4][0].xmax - grid._by_idx.item[4][0].xmax))) &&
    (10000 > (Math.abs(grid._by_idx.item[4][0].ymax - grid._by_idx.item[4][0].ymax))) ))
    {
     hiddenRows.push(i);
     i++;
    }
   }
  }

The hiddenRows function:

  var g2 = dijit.byId('grid'); 
  
  var _hideRow = function(index){ 
   dojo.forEach(g2.views.views, function(v){ 
    dojo.style(v.rowNodes[index], {'display':"none"}); 
   }); 
  } 

  //hide rows 
  dojo.forEach(hiddenRows, _hideRow); 

  
  //make sure they are also hidden when rendered later 
  dojo.connect(g2.views, 'renderRow', function(index){ 
   if(dojo.indexOf(hiddenRows, index) >= 0){ 
    _hideRow(index);
   } 
  });

[Salomon_VágadalJoensen]

Because grid._by_idx only saves for what is defined by the RowsPerPage rendered, I used grid.store._arrayOfAllItems , that way the for loop goes through all of the store instead of just the rendered items. There are a few bugs for large results, but otherwise it works. Otherwise I still use the hiddenRows function to hide duplicate values.

  // um meira enn eitt úrslit so goym dubbult-úrslit.
  if (grid.store._arrayOfAllItems.length > 1) {
  
   for (var i=0; grid.store._arrayOfAllItems.length > i; i++) {
    for (var k=0; grid.store._arrayOfAllItems.length> k; k++) {
     if ( (grid == false) && (i != k) &&
      (grid.store._arrayOfAllItems[2][0] === grid.store._arrayOfAllItems[2][0]) &&
      (grid.store._arrayOfAllItems[1][0] === grid.store._arrayOfAllItems[1][0]) 
      && 
      (10000 > (Math.abs(grid.store._arrayOfAllItems[4][0].xmin - grid.store._arrayOfAllItems[4][0].xmin))) &&
      (10000 > (Math.abs(grid.store._arrayOfAllItems[4][0].ymin - grid.store._arrayOfAllItems[4][0].ymin))) &&
      (10000 > (Math.abs(grid.store._arrayOfAllItems[4][0].xmax - grid.store._arrayOfAllItems[4][0].xmax))) &&
      (10000 > (Math.abs(grid.store._arrayOfAllItems[4][0].ymax - grid.store._arrayOfAllItems[4][0].ymax))) )
      {
       
       grid = true;
       hiddenRows.push(i);
       i++;
       
      }

    }
   }
   console.log(superl);
   console.log(grid);
  }