topic Re: Sample "Show find task results in a Data Grid" not working for point layer. in ArcGIS JavaScript Maps SDK Questions

Sample "Show find task results in a Data Grid" not working for point layer.

LauraTeisl — Thu, 01 May 2014 11:52:53 GMT

Hello. I am attempting to use the "Show find task results in a Data Grid" with a service with a point layer. It is not working. Also, I would like all of the points to display initially. Again, the I am a JavaScript newbie and appreciate any input. Thanks.

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Display Find Task results in Dojo DataGrid</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      require([
        "esri/map",
        "esri/tasks/FindTask",
        "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",

        "esri/Color",
        "dojo/on",
        "dojo/dom",
        "dijit/registry",
        "dojo/_base/array",
        "dojo/_base/connect",
        "dojox/grid/DataGrid",
        "dojo/data/ItemFileReadStore",
        "dijit/form/Button",
        "dojo/parser",

        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        Map, FindTask, FindParameters, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        Color, on, dom, registry, arrayUtils, connect, DataGrid, ItemFileReadStore, Button, parser
      ) {
        var findTask, findParams;
        var map, center, zoom;
        var grid, store;

        parser.parse();

        registry.byId("search").on("click", doFind);

        center = [-69, 45.5];
        zoom = 7;
        map = new esri.Map("map", {
          basemap: "topo",
          center: center,
          zoom: zoom
        });

        //Create Find Task using the URL of the map service to search
        findTask = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer/0");

        map.on("load", function () {
          //Create the find parameters
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["org_name", "city_town", "Used_comb"];
          findParams.outSpatialReference = map.spatialReference;
          console.log("find sr: ", findParams.outSpatialReference);
        });

        function doFind() {
          //Set the search text to the value in the box
          findParams.searchText = dom.byId("org_name").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 SimpleFillSymbol(
            SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2),
            new Color([98, 194, 204, 0.5])
          );

          //create array of attributes
          var items = arrayUtils.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 : "org_name", //This field needs to have unique values
            label : "Name", //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 ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);

          //Zoom back to the initial map extent
          map.centerAndZoom(center, zoom);
        }

        //Zoom to the parcel when the user clicks a row - changed clickedTaxLotID to clickedOrgName - changed selectedTaxLot to selectedOrgName
        function onRowClickHandler(evt) {
          var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name;
          var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function (graphic) {
            return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName);
          });
          if ( selectedOrgName.length ) {
            map.setExtent(selectedOrgName[0].geometry.getExtent(), true);
          }
        }
      });
    </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;">
      Owner name: <input type="text" id="ownerName" size="60" value="Northern Girl" />
          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search
          </button>
    </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="org_name">Name</th>
          <th field="city_town" >City</th>
          <th field="cont_pers">Contact</th>
          <th field="sp_prdcts">Products</th>
          <th field="Used-comb" width="100%">Products Used</th>
        </tr>
      </thead>
    </table>
    </div>
</div>
</body>
</html>

Re: Sample "Show find task results in a Data Grid" not working for point layer.

JakeSkinner — Thu, 01 May 2014 13:36:59 GMT

Hi Laura,

I noticed a couple errors.

1. The findParams.searchText is set to the wrong dom. It should be:

findParams.searchText = dom.byId("ownerName").value;

2. In the 'showResults' function, you will want to create a SimpleMarkerSymbol instead of a SimpleFillSymbol since you are working with point data.

var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12,              new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5])                     );

3. You will need to update the 'onRowClickHandler' function to zoom to a point rather than a polygon:

function onRowClickHandler(evt) {           var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name;           var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) {             return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName);           });           if (selectedOrgName.length) {               var center2 = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()];               var zoom2 = 15;               map.centerAndZoom(center2, zoom2);           }         }

4. In the HTML, the grid fields need to be set to the field alias:

<thead>             <tr>               <th field="Name">Name</th>               <th field="City" >City</th>               <th field="Contact">Contact</th>               <th field="Products">Products</th>               <th field="Products Used" width="100%">Products Used</th>             </tr> </thead>

Here is what I was able to get to work:

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--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>Display Find Task results in Dojo DataGrid</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">     <style>       html, body {         height: 100%;         width: 100%;         margin: 0;         padding: 0;       }     </style>     <script src="http://js.arcgis.com/3.9/"></script>     <script>       require([         "esri/map", "esri/tasks/FindTask", "esri/tasks/FindParameters",         "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",          "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on",         "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/_base/connect",          "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/form/Button",          "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",          "dojo/domReady!"         ], function(           Map, FindTask, FindParameters,           SimpleMarkerSymbol, SimpleLineSymbol,            SimpleFillSymbol, Color, on,            dom, registry, arrayUtils, connect,            DataGrid, ItemFileReadStore, Button,            parser) {         var findTask, findParams;         var map, center, zoom;         var grid, store;          parser.parse();          registry.byId("search").on("click", doFind);          center = [-69, 45.5];         zoom = 7;         map = new esri.Map("map", {           basemap : "topo",           center : center,           zoom : zoom         });          //Create Find Task using the URL of the map service to search         findTask = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer");          map.on("load", function() {           //Create the find parameters           findParams = new FindParameters();           findParams.returnGeometry = true;           findParams.layerIds = [0];           findParams.searchFields = ["org_name", "city_town", "Used_comb"];           findParams.outSpatialReference = map.spatialReference;         });          function doFind() {           //Set the search text to the value in the box           findParams.searchText = dom.byId("ownerName").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 SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12,              new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5])                     );            //create array of attributes           var items = arrayUtils.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 : "Name", //This field needs to have unique values             label : "Name", //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 ItemFileReadStore({             data : data           });           var grid = registry.byId("grid");                      console.log(store);                      grid.setStore(store);           grid.on("rowclick", onRowClickHandler);            //Zoom back to the initial map extent           map.centerAndZoom(center, zoom);         }          //Zoom to the parcel when the user clicks a row - changed clickedTaxLotID to clickedOrgName - changed selectedTaxLot to selectedOrgName         function onRowClickHandler(evt) {           var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name;           var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) {             return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName);           });           if (selectedOrgName.length) {             var center2 = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()];             var zoom2 = 15;             map.centerAndZoom(center2, zoom2);           }         }        });     </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;">         Owner name:         <input type="text" id="ownerName" size="60" value="Northern Girl" />         <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >           Search         </button>       </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="Name">Name</th>               <th field="City" >City</th>               <th field="Contact">Contact</th>               <th field="Products">Products</th>               <th field="Products Used" width="100%">Products Used</th>             </tr>           </thead>         </table>       </div>     </div>   </body> </html>

Also, when posting code, be sure to wrap it in

 tags using the

# symbol above.

Re: Sample "Show find task results in a Data Grid" not working for point layer.

LauraTeisl — Thu, 01 May 2014 17:13:22 GMT

Thank you. Brilliant! And I will add any code between

 tags from now on.

May I ask how you would add a drop down list of all possible "ownerName" so a user would not have to guess at the possible choices?

Re: Sample "Show find task results in a Data Grid" not working for point layer.

JakeSkinner — Fri, 10 Dec 2021 20:47:23 GMT

You will need to query the feature layer and then add the names to a combo box:

var featureLayer = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer/0",{
    mode: FeatureLayer.MODE_ONDEMAND,
    outFields: ["*"]
});                        

var query = new Query();
query.where = "1=1";

featureLayer.queryFeatures(query, function(featureSet) {      
  nameList = [];
  
  dojo.map(featureSet.features, function(feature) {
    nameList.push(feature.attributes.org_name);
  });  
  
  arrayUtils.forEach(nameList, function(feature){                          
        registry.byId("ownerName").get('store').add({ name: feature});
  })       
});

Working Ex:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Display Find Task results in Dojo DataGrid</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", 
        "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "esri/tasks/query",
        "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/_base/connect", 
        "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/form/Button", 
        "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox",
        "dojo/domReady!"
        ], function(
          Map, FeatureLayer, FindTask, FindParameters,
          SimpleMarkerSymbol, SimpleLineSymbol, 
          SimpleFillSymbol, Color, on, Query,
          dom, registry, arrayUtils, connect, 
          DataGrid, ItemFileReadStore, Button, 
          parser) {
        var findTask, findParams;
        var map, center, zoom;
        var grid, store;

        parser.parse();

        registry.byId("search").on("click", doFind);

        center = [-69, 45.5];
        zoom = 7;
        map = new esri.Map("map", {
          basemap : "topo",
          center : center,
          zoom : zoom
        });
        
        var featureLayer = new FeatureLayer("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer/0",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
        });                        
        
        var query = new Query();
        query.where = "1=1";

        featureLayer.queryFeatures(query, function(featureSet) {      
          nameList = [];
          
          dojo.map(featureSet.features, function(feature) {
            nameList.push(feature.attributes.org_name);
          });  
          
          arrayUtils.forEach(nameList, function(feature){                          
                registry.byId("ownerName").get('store').add({ name: feature});
          })       
        });

        //Create Find Task using the URL of the map service to search
        findTask = new FindTask("http://ummgis.umm.maine.edu:6080/arcgis/rest/services/testing/SpecFoodProdGIS428/MapServer");

        map.on("load", function() {
          //Create the find parameters
          findParams = new FindParameters();
          findParams.returnGeometry = true;
          findParams.layerIds = [0];
          findParams.searchFields = ["org_name", "city_town", "Used_comb"];
          findParams.outSpatialReference = map.spatialReference;
        });

        function doFind() {
          //Set the search text to the value in the box
          findParams.searchText = dom.byId("ownerName").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 SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 12, 
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([0, 0, 0, 0.9]), 1), new Color([0, 0, 0, 0.5])          
          );

          //create array of attributes
          var items = arrayUtils.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 : "Name", //This field needs to have unique values
            label : "Name", //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 ItemFileReadStore({
            data : data
          });
          var grid = registry.byId("grid");
          
          console.log(store);
          
          grid.setStore(store);
          grid.on("rowclick", onRowClickHandler);

          //Zoom back to the initial map extent
          map.centerAndZoom(center, zoom);
        }

        //Zoom to the parcel when the user clicks a row - changed clickedTaxLotID to clickedOrgName - changed selectedTaxLot to selectedOrgName
        function onRowClickHandler(evt) {
          var clickedOrgName = evt.grid.getItem(evt.rowIndex).org_name;
          var selectedOrgName = arrayUtils.filter(map.graphics.graphics, function(graphic) {
            return ((graphic.attributes) && graphic.attributes.org_name === clickedOrgName);
          });
          if (selectedOrgName.length) {
            var center2 = [selectedOrgName[0].geometry.getLongitude(), selectedOrgName[0].geometry.getLatitude()];
            var zoom2 = 15;
            map.centerAndZoom(center2, zoom2);
          }
        }

      });
    </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;">
        Owner name:
        <!--<input type="text" id="ownerName" size="60" value="Northern Girl" />-->
        <select id="ownerName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;"
          value="Select an Owner"></select>
        <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >
          Search
        </button>
      </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="Name">Name</th>
              <th field="City" >City</th>
              <th field="Contact">Contact</th>
              <th field="Products">Products</th>
              <th field="Products Used" width="100%">Products Used</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </body>
</html>

Also, if this resolves your issue, please mark the thread as 'Answered'. This will help other users in the community.

topic Re: Sample "Show find task results in a Data Grid" not working for point layer. in ArcGIS JavaScript Maps SDK Questions

Sample &quot;Show find task results in a Data Grid&quot; not working for point layer.

Re: Sample "Show find task results in a Data Grid" not working for point layer.

Re: Sample "Show find task results in a Data Grid" not working for point layer.

Re: Sample "Show find task results in a Data Grid" not working for point layer.

Sample "Show find task results in a Data Grid" not working for point layer.