berksupport

ShowResults in datagrid using a point feature

Discussion created by berksupport on Mar 25, 2013
Latest reply on Mar 25, 2013 by berksupport
I have looked through numerous postos on this, but I cannot seem to solve my problem.

The attributes are not populating my datagrid. If I use BJECTID or my GlobalID for the features the datagrid populates with that information, but no other attributes. The ZOOM to feature even works.

Any assistance would br greatly appreciated

Thank you.


<!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">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>911 Research</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
   
<script type="text/javascript">
  dojoConfig = {
    parseOnLoad: true
  };
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
<script type="text/javascript" language="Javascript">
  dojo.require("dojox.grid.DataGrid");
  dojo.require("dojo.data.ItemFileReadStore");
  dojo.require("esri.map");
  dojo.require("esri.tasks.find");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");

  var findTask, findParams;
      var map, startExtent;
      var grid, store;

  function init() {
  
dojo.connect(grid, "onRowClick", onRowClickHandler);

    var startExtent = new esri.geometry.Extent({"xmin":2328173.3028935865,
            "ymin":282104.61435875297,
            "xmax":2441858.2039148845,
            "ymax":411949.6673321724,
            "spatialReference":{"wkid":102750}});
    map = new esri.Map("map",{extent:startExtent, maxZoom: 1, minZoom: 7, sliderStyle: "large"});
    var countyLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://maps.berkeleywv.org/arcgis/rest/services/Berkeley_Boundary/MapServer", {
    });
    map.addLayer(countyLayer);
var roadsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.berkeleywv.org/arcgis/rest/services/Roads/MapServer");
map.addLayer(roadsLayer);
var structuresLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.berkeleywv.org/arcgis/rest/services/berkeley_structures/MapServer");
map.addLayer(structuresLayer);

    //create find task with url to map service
    findTask = new esri.tasks.FindTask("http://maps.berkeleywv.org/arcgis/rest/services/Berkeley_Addresses/MapServer");

    //Create the find parameters
        findParams = new esri.tasks.FindParameters();
        findParams.returnGeometry = true;
        findParams.layerIds = [0];
        findParams.searchFields = ["FULLADDR"];
      }

      function doFind() {
        //Set the search text to the value in the box
        findParams.searchText = dojo.byId("searchText").value;
        findTask.execute(findParams,showResults);
      }

      function showResults(results) {
        //This function works with an array of FindResult that the task returns
        map.graphics.clear();
        var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 10,
          new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color([0, 0, 0]), 1),
            new dojo.Color([255, 255, 0, 1]));


        //Create items array to be added to store's data
        var items = []; //all items to be stored in data store
        for (var i = 0, il = results.length; i < il; i++) {
            items.push(results[i].feature.attributes);  //append each attribute list as item in store
            var graphic = results[i].feature;


            //variable for the point extent
            var pt = graphic.geometry;

            graphic.setSymbol(symbol);
            map.graphics.add(graphic);


        }

        //Create data object to be used in store
        var data = {
          identifier: "GlobalID",  //This field needs to have unique values
          label: "GlobalID", //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 });
        grid.setStore(store);
        grid.setQuery({ GlobalID: '*' });

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

      }

      //Zoom to the parcel when the user clicks a row
      function onRowClickHandler(evt) {
            var clickedGlobalID = grid.getItem(evt.rowIndex).GlobalID;
            var selectedAddress;
            for (var i = 0, il = map.graphics.graphics.length; i < il; i++) {
                var currentGraphic = map.graphics.graphics[i];
                //variable for the point extent
                //var pt = graphic.geometry;
                if ((currentGraphic.attributes) && currentGraphic.attributes.GlobalID == clickedGlobalID) {
                    selectedAddress = currentGraphic;
                    break;
}
        }
        //add this code to set the point extent and zoom in
            var PointExtent = new esri.geometry.Extent();
                PointExtent.xmin = selectedAddress.geometry.x - 5;
                PointExtent.ymin = selectedAddress.geometry.y - 5;
                PointExtent.xmax = selectedAddress.geometry.x + 5;
                PointExtent.ymax = selectedAddress.geometry.y + 5;

               map.setExtent(PointExtent);

      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">
    Owner name: <input type="text" id="searchText" size="60" value="COURTHOUSE DR" />
    <input type="button" value="Search" onclick="doFind();" /><br />
    <br />
    <div id="map" style="width:1000px; height:800px; border:1px solid #000;"></div>
     <table dojoType="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" rowsPerPage="5" rowSelector="20px" style="height:300px; width:1000px">
      <thead>
        <tr>
          <th field="FULLADDR" width="100%">FULL</th>
        </tr>
      </thead>
    </table>
  </body>
</html>

Outcomes