nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

LauraTeisl

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>

Finde mehr Beiträge mit dem Tag

Accepted answers

JakeSkinner

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.

All comments

JakeSkinner

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.

LauraTeisl

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?

JakeSkinner

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.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.