AnsweredAssumed Answered

Grid- Find task based on Radio Button Selection

Question asked by Linn_GIS on Jan 5, 2015
Latest reply on Jan 6, 2015 by jskinner-esristaff

I am looking for the best way to run a find task based on a radio button selection and export that to a grid. Thus I simply choose the correct radio button I want to use and search layer and populate results.  Thanks,

 

<!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.12/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojox/grid/resources/Grid.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dojox/grid/resources/claroGrid.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">

    <style>

      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    </style>

    <script src="http://js.arcgis.com/3.12/"></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 = [-83.266, 42.568];

        zoom = 11;

        map = new esri.Map("map", {

          basemap: "streets",

          center: center,

          zoom: zoom

        });

 

 

        //Create Find Task using the URL of the map service to search

        findTask = new FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");

 

 

findTask = new FindTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0");

 

 

        map.on("load", function () {

          //Create the find parameters

          findParams = new FindParameters();

          findParams.returnGeometry = true;

          findParams.layerIds = [0];

          findParams.searchFields = ["OWNERNME1", "OWNERNME2"];

          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("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 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 : "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 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

        function onRowClickHandler(evt) {

          var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).PARCELID;

          var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {

            return ((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId);

          });

          if ( selectedTaxLot.length ) {

            map.setExtent(selectedTaxLot[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="Katz" />     

          <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search      

          </button>

          <input type="radio" id="radLayer1" name="rbLayer" value="rbLayerONE" checked>Layer 1

          <input type="radio" id="radLayer2" name="rbLayer" value="rbLayerTWO" checked>Layer 2

         

    </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>

Outcomes