IdentifyTask results' attributes to Datagrid

AndrewBrown1 · ‎07-21-2011

Hello,

I'm trying to use the results' attributes from an identifytask to populate a dynamic datagrid. I found an ESRI example that uses the findtask to do this, but I'm having issues with the identifyTask. The grid structure is created, but there is a problem with the itemfilereadstore.

Does anybody have any examples? Or does anybody know what I'm doing wrong? My code is below:

          identifyParams = new esri.tasks.IdentifyParameters(); 
          identifyParams.tolerance = 3; 
          identifyParams.returnGeometry = true; 
          identifyParams.layerIds = [1];
          identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
          identifyParams.geometry = geometry;
          identifyParams.mapExtent  = map.extent; 
          identifyParams.width  = map.width; 
          identifyParams.height = map.height; 
          identifyTask.execute(identifyParams, function(identifyResults){
            if(identifyResults.length>0){
              var items = dojo.map(identifyResults, function(result){
                var graphic = result.feature;
                switch(result.geometryType){
              
                case "esriGeometryPoint":
                symbol = new esri.symbol.SimpleMarkerSymbol();
                break;
                case "esriGeometryPolygon":
                symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98, 194, 204]), 2), new dojo.Color([98, 194, 204, 0.5]));
                break;
                }
                graphic.setSymbol(symbol);
                map.graphics.add(graphic);
                return result.feature.attributes;
                
              });
            
          var fieldName;
        var fieldNameArr = [];
        var selectedLayer;
        
        clearSelectResults();

        for (fieldName in items[0]) {
          if (items[0].hasOwnProperty(fieldName)) {
            fieldNameArr.push({
              field: fieldName,
              name: tableNames(fieldName),
              editable: false
            });
            
            
          }
        }
        var data = {
          identifier: "OBJECTID",  //This field needs to have unique values
          items: items
        }; 
        var store2 = new dojo.data.ItemFileReadStore({ data:data });
        
        var children = dojo.byId("wellsTab");
        while(children.firstChild){
         children.removeChild(children.firstChild); 
        }
        
        wellsGrid = new dojox.grid.EnhancedGrid({
          query: {
            OBJECTID: '*'
          },
          
          clientSort:true,
          autowidth:true,
          structure:fieldNameArr,
          rowsPerPage: 250,
          plugins: {
            indirectSelection:{ 
                name:"Select",
                field:"Select",
                width: "70px",
                styles: "text-align: center;"
                
                }
          }
        });
        dojo.byId("wellsTab").appendChild(wellsGrid.domNode);
        wellsGrid.setStore(store2);
        dijit.byId("bottomTabs").selectChild(dijit.byId("wellsTab"));
        
        wellsGrid.startup();
        wellsGrid.update();
        wellsGrid.rowSelectCell.toggleAllSelection(true);
        
        wellsGrid.resize();
        
        dojo.connect(wellsGrid, 'onDeselected', function(rowId){
          
          map.graphics.remove(results.features[rowId]);
        
        
        });
        dojo.connect(wellsGrid, 'onSelected', function(rowId){
        
            map.graphics.add(results.features[rowId]);
        
        });
        
        }
        });

AndrewBrown1 · ‎07-21-2011

See my attachment for a diagram of what I'm talking about...

derekswingley1 · ‎07-22-2011

I modified the find task with results in a grid to use an identify task:

<!doctype html">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Display Identify Task results in Dojo DataGrid</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dojox/grid/resources/claroGrid.css">
    <script type="text/javascript">dojoConfig = { parseOnLoad:true }</script>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("esri.tasks.identify");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.Button");
      
      var idTask, idParams;
      var map, startExtent;
      var grid, store;
      function init() {
        dojo.connect(grid, "onRowClick", onRowClickHandler);

        //Create map and add the ArcGIS Online imagery layer
        startExtent = new esri.geometry.Extent({"xmin":-9275203,"ymin":5248350,"xmax":-9271966,"ymax":5249253,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent: startExtent});
        
        var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(streetMapLayer);

        // Dynamic map service used by the Identify task
        // Uncomment the next two lines to see parcel boundaries
        // var parcelLayer = new esri.layers.ArcGISDynamicMapServiceLayer('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer');
        // map.addLayer(parcelLayer);

        //Create Identify Task using the URL of the map service to search
        idTask = new esri.tasks.IdentifyTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer");

        //Create the identify parameters
        idParams = new esri.tasks.IdentifyParameters();
        idParams.returnGeometry = true;
        idParams.layerIds = [0];
        idParams.tolerance = 3;
        idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
        idParams.width  = map.width;
        idParams.height = map.height;

        dojo.connect(map, 'onClick', doIdentify);
        
        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout( function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
      }

      function doIdentify(evt) {
        //Set the search text to the value in the box
        idParams.geometry = evt.mapPoint;
        idParams.mapExtent = map.extent;
        console.log('do ID: ', evt, '; params: ', idParams);
        idTask.execute(idParams, showResults);
      }

      function showResults(results) {
        console.log('got results: ', results);
        map.graphics.clear();
        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));

        //create array of attributes
        var items = dojo.map(results,function(result){
          var graphic = result.feature;
          graphic.setSymbol(symbol);
          map.graphics.add(graphic);
          return result.feature.attributes;
        });
  
        
        //Create data object to be used in store
        var data = {
          identifier: "PARCELID",  //This field needs to have unique values
          label: "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.
          items: items
        };

         //Create data store and bind to grid.
        store = new dojo.data.ItemFileReadStore({ data:data });
        var grid = dijit.byId('grid');
        grid.setStore(store);

        //Zoom back to the initial map extent
        map.setExtent(startExtent);

      }

      //Zoom to the parcel when the user clicks a row
      function onRowClickHandler(evt){
        var clickedTaxLotId = grid.getItem(evt.rowIndex).PARCELID;
        var selectedTaxLot;

        dojo.forEach(map.graphics.graphics,function(graphic){
          if((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId){
            selectedTaxLot = graphic;
            return;
          }
        });
        var taxLotExtent = selectedTaxLot.geometry.getExtent();
        map.setExtent(taxLotExtent);
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
  <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:40px;">
      Identify Task + Dojo Data Grid
    </div>
    <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane" style="border:1px solid #000;"></div>
    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">
     <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
          <th field="PARCELID">Parcel ID</th>
          <th field="OWNERNME1" >Owner 1</th>
          <th field="OWNERNME2">Owner 2</th>
          <th field="RESYRBLT ">Year Built</th>
          <th field="SITEADDRESS" width="100%">Address</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>
</html>

Two big changes: switch to an identify task and set up a map click handler; I didn't have to change any of the logic in the callback that handles the results from the identify task.

StephenLead · ‎07-22-2011

     <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
      <thead>
        <tr>
          <th field="PARCELID">Parcel ID</th>
          <th field="OWNERNME1" >Owner 1</th>
          <th field="OWNERNME2">Owner 2</th>
          <th field="RESYRBLT ">Year Built</th>
          <th field="SITEADDRESS" width="100%">Address</th>
        </tr>
      </thead>
    </table>

This is great - thanks for posting it.

A comment on the samples in general is that they mostly contain hard-coded elements such as the table above.

It would be great if you could post some examples which are more generic, so they can be used more easily. For example, rather than hard-coding the field names and aliases, build the table on-the-fly.

Or perhaps post a sample "template" for a best-practices application.

Cheers,
Steve

AndrewBrown1 · ‎07-26-2011

Actually, the only thing that I needed to do to fix my code was to remove the "identifier" from the data variable. Something must be wrong with our OBJECTIDs, so they weren't unique.

I read somewhere that if an "identifier" isn't provided, one is built automatically. Once I removed it, everything worked perfectly.

ChristopherPollard · ‎03-09-2012

Derek,
Thanks for the example. I used yours sample to identify a polygon and it worked perfect.
But when I go to identify a dynamic point layer I get a few extent errors and the zoom in the data grid stops working.
If you could provide another example of your code for a point that would be perfect! thanks.
I have attached my sample for reference.