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; } } }

Locator results to data grid / table?

ChrisBuckmaster1

Hi

I am working with a locator but would prefer the results to be outputted to a data grid / table for the user to select their desired address (if more than 1 is returned).

Cannot seem to find any samples that have implemented this, not too sure if there is anyone out there who has coded something like this?

I was thinking of using a dojo data grid (much like the find task sample) but cannot figure out how to pass the candidate results into a grid.

Any help? 🙂

Thanks

Find more posts tagged with

Accepted answers

All comments

GabiVoicu

Chris, that is exactly what I was looking for - would you mind sharing or posting your sample in the code gallery?

Thank you
Gabi Voicu

HemingZhu

Thanks for the quick response. I was originally using a composite locator and could not bind it and assumed my data grid was structured wrong. However, once I used a single locator, I could bind. I guess the composite returns a different array structure.

Thanks again.

IN your locator REST entry, you could find Candidate Fields and/or Intersection Candidate Fields.

Those fields are the ones you could choose to bind.

ScottKearney

Thanks for the quick response. I was originally using a composite locator and could not bind it and assumed my data grid was structured wrong. However, once I used a single locator, I could bind. I guess the composite returns a different array structure.

Thanks again.

HemingZhu

What would the datagrid headings look like? I get an error when trying to bind the datastore to the following datagrid:

                        <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="AddressGrid" id="AddressGrid"
                            data-dojo-props="rowSelector:''" style="width: 325px; height: 350px;
                            margin: 0; overflow: scroll">
                            <thead>
                                <tr>
                                    <th field="Match_addr">
                                        Match_addr
                                    </th>
                                    <th field="Score">
                                        Score
                                    </th>
                                    <th field="Ref_ID">
                                        Ref_ID
                                    </th>
                                </tr>
                            </thead>
                        </table>

You can create a grid structure layout in your init by the following:

  ...
  var layout = {
            cells: [
  { field: "Match_addr", name: "Match Address", width: 'auto' },
  { field: "Score", name: "Scores", width: '125px' },
                    { field: "Ref_ID", name: "Reference ID", width: '125px' }
                   ]
        };
        var grid = dijit.byId("AddressGriD");
        grid.attr("structure", layout);
        ...

ScottKearney

What would the datagrid headings look like? I get an error when trying to bind the datastore to the following datagrid:

                        <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="AddressGrid" id="AddressGrid"
                            data-dojo-props="rowSelector:''" style="width: 325px; height: 350px;
                            margin: 0; overflow: scroll">
                            <thead>
                                <tr>
                                    <th field="Match_addr">
                                        Match_addr
                                    </th>
                                    <th field="Score">
                                        Score
                                    </th>
                                    <th field="Ref_ID">
                                        Ref_ID
                                    </th>
                                </tr>
                            </thead>
                        </table>

ChrisBuckmaster1

Heming

Brilliant once again - you saved me another day of looking at dojox grid filtering so thanks a lot! 🙂

HemingZhu

Hi Heming

Sorry but I have stumbled upon another problem so if you fancy figuring the following out I would appreciate it! 🙂

All of my candidate addresses are coming up in the data grid and I can successfully zoom to each one which is great, but I am trying to limit the number of results that are outputted to the grid using an if statement which is used in the ESRI locator sample (the code snippet below is what I have tried to use).

I run it when the array 'items' is built to try and only select those that have a candidate score of 80 or above - my graphics layer is successfully drawing only those candidates that have a score of +80 but the data grid has an error, when using firebug it mentions that it "cannot set property '_RI' of undefined".

Digging a bit deeper this variable seems to be set in the dojo.data.ItemFileReadStore:-

this._rootItemPropName = "_RI"; // Default Item Id for isItem to attach to every item.

This might be something more dojo related but I don't suppose you have any other possible ways of limiting the candidates down by scores or indeed if the above error might be solvable?

I appreciate all the help you have given me so far! 🙂

//CODE

//create array of attributes
        var items = dojo.map(candidates,function(candidate){
if (candidate.score > 80){
            geom = new esri.geometry.Point(candidate.location.x, candidate.location.y);
   var attributes = candidate.attributes;
   var scoreCandidate = candidate.score;
            var graphic = new esri.Graphic(geom, symbol, attributes);
            //add a graphic to the map at the geocoded location
            map.graphics.add(graphic);
            return candidate.attributes;//break out of loop after one candidate with score greater than 80 is found.
}
});

//CODE

The simplest approach would be setup the loactor's minium score as 80 and then publish it on the server. then you would has to deal with it using code logic.

ChrisBuckmaster1

Hi Heming

Sorry but I have stumbled upon another problem so if you fancy figuring the following out I would appreciate it! 🙂

All of my candidate addresses are coming up in the data grid and I can successfully zoom to each one which is great, but I am trying to limit the number of results that are outputted to the grid using an if statement which is used in the ESRI locator sample (the code snippet below is what I have tried to use).

I run it when the array 'items' is built to try and only select those that have a candidate score of 80 or above - my graphics layer is successfully drawing only those candidates that have a score of +80 but the data grid has an error, when using firebug it mentions that it "cannot set property '_RI' of undefined".

Digging a bit deeper this variable seems to be set in the dojo.data.ItemFileReadStore:-

this._rootItemPropName = "_RI"; // Default Item Id for isItem to attach to every item.

This might be something more dojo related but I don't suppose you have any other possible ways of limiting the candidates down by scores or indeed if the above error might be solvable?

I appreciate all the help you have given me so far! 🙂

//CODE

//create array of attributes
        var items = dojo.map(candidates,function(candidate){
if (candidate.score > 80){
            geom = new esri.geometry.Point(candidate.location.x, candidate.location.y);
   var attributes = candidate.attributes;
   var scoreCandidate = candidate.score;
            var graphic = new esri.Graphic(geom, symbol, attributes);
            //add a graphic to the map at the geocoded location
            map.graphics.add(graphic);
            return candidate.attributes;//break out of loop after one candidate with score greater than 80 is found.
}
});

//CODE

HemingZhu

Hi Heming

Thanks a lot for your help with this, figured out that I need to use the geometry property just as I posted my last reply.

Thanks again! 🙂

PS - How can I give you credit for this? I cannot find a "this post answered my question" option anywhere?

Don't mention it. Just want to help

ChrisBuckmaster1

Hi Heming

Thanks a lot for your help with this, figured out that I need to use the geometry property just as I posted my last reply.

Thanks again! 🙂

PS - How can I give you credit for this? I cannot find a "this post answered my question" option anywhere?

HemingZhu

Hi Heming

I put an alert in the onrowclick function to write the attributes of graphic just to see what I would get.

Before it was just saying undefined but it now successfully shows the Ref_ID value of the row I clicked on which means the code you provided has worked.

The problem now is I do not have the X,Y coordinates to use in the attributes to do a zoom to point (I do not have X,Y coordinates available in the candidate fields to use so will have to use the candidate.location values somehow).

dojo.forEach(map.graphics.graphics,function(graphic){
if((graphic.attributes) && graphic.attributes.IDENT === clickedAddressId){
selectedAddress = graphic;
return;
}
});
//map.centreAndZoom(selectedAddress,7);
map.centreAndZoom(selectedAddress.geometry,7);
}

ChrisBuckmaster1

Hi Heming

I put an alert in the onrowclick function to write the attributes of graphic just to see what I would get.

Before it was just saying undefined but it now successfully shows the Ref_ID value of the row I clicked on which means the code you provided has worked.

The problem now is I do not have the X,Y coordinates to use in the attributes to do a zoom to point (I do not have X,Y coordinates available in the candidate fields to use so will have to use the candidate.location values somehow).

HemingZhu

Thanks Heming that was very helpful, I have now managed to get my candidate addresses into the data grid with my desired fields!

Using the find sample I would now like to be able to zoom to each individual feature from the grid but am having some problems here.

In the original find sample the variable 'graphic' is defined as the result.feature of the find task which has attributes assigned to it already.

I have assigned attributes to the 'graphic' variable in my code but it does not seem to work.

Is there anything obviously wrong with the below code as to why it might not zoom to each address point?

//CODE

function locate() {
        map.graphics.clear();
var searchResult = dijit.byId("addressSearch").value;
        var address = {"Single Line Input": searchResult};
locator.addressToLocations(address,["Ref_ID, Score, Match_addr"]);
      }

      function showResults(candidates) {
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
        symbol.setColor(new dojo.Color([153,0,51,0.75]));

//create array of attributes
        var items = dojo.map(candidates,function(candidate){
            var geom = esri.geometry.Point(candidate.location);
   var attributes = {IDENT:candidate.attributes.Ref_ID};
            var graphic = new esri.Graphic(geom, symbol, attributes);
            //add a graphic to the map at the geocoded location
            map.graphics.add(graphic);
            return candidate.attributes;
        });

       var data = {
          identifier: "Ref_ID", //This field needs to have unique values
          label: "Ref_ID", //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);
      }

   function onRowClickHandler(evt){
        var clickedAddressId = grid.getItem(evt.rowIndex).Ref_ID;
        var selectedAddress;

        dojo.forEach(map.graphics.graphics,function(graphic){
          if((graphic.attributes) && graphic.attributes.IDENT === clickedAddressId){
            selectedAddress = graphic;
            return;
          }
        });
        map.centreAndZoom(selectedAddress,7);
      }

//FINISH CODE

Replace the statement: var attributes = {IDENT:candidate.attributes.Ref_ID}
with var attributes = candidate.attributes and tried again.

ChrisBuckmaster1

Thanks Heming that was very helpful, I have now managed to get my candidate addresses into the data grid with my desired fields!

Using the find sample I would now like to be able to zoom to each individual feature from the grid but am having some problems here.

In the original find sample the variable 'graphic' is defined as the result.feature of the find task which has attributes assigned to it already.

I have assigned attributes to the 'graphic' variable in my code but it does not seem to work.

Is there anything obviously wrong with the below code as to why it might not zoom to each address point?

//CODE

function locate() {
        map.graphics.clear();
var searchResult = dijit.byId("addressSearch").value;
        var address = {"Single Line Input": searchResult};
locator.addressToLocations(address,["Ref_ID, Score, Match_addr"]);
      }

      function showResults(candidates) {
        var symbol = new esri.symbol.SimpleMarkerSymbol();
        symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
        symbol.setColor(new dojo.Color([153,0,51,0.75]));

//create array of attributes
        var items = dojo.map(candidates,function(candidate){
            var geom = esri.geometry.Point(candidate.location);
   var attributes = {IDENT:candidate.attributes.Ref_ID};
            var graphic = new esri.Graphic(geom, symbol, attributes);
            //add a graphic to the map at the geocoded location
            map.graphics.add(graphic);
            return candidate.attributes;
        });

       var data = {
          identifier: "Ref_ID", //This field needs to have unique values
          label: "Ref_ID", //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);
      }

   function onRowClickHandler(evt){
        var clickedAddressId = grid.getItem(evt.rowIndex).Ref_ID;
        var selectedAddress;

        dojo.forEach(map.graphics.graphics,function(graphic){
          if((graphic.attributes) && graphic.attributes.IDENT === clickedAddressId){
            selectedAddress = graphic;
            return;
          }
        });
        map.centreAndZoom(selectedAddress,7);
      }

//FINISH CODE

HemingZhu

Hi Heming

Thanks for your response.

Yes I was looking at this sample and wondering how it can be implemented for a locator.

I was confused as to how you would list the data in the grid particularly with the field headings as they are defined differently.

If you look at this sample locator: http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer,
AddressCandidate's attributes are came from Candidate Fields(or InterSection Candidate Fields) depending upon your address and outFields in addressToLocations(address, outFields?, callback?, errback?). So when you binding addresscandidate to data store, its fileds will automate populate in the data grid except for the identifier field which should be unique and explicitly specify(as i suggested using Reference data ID field(whichever that name is)....

ChrisBuckmaster1

Hi Heming

Thanks for your response.

Yes I was looking at this sample and wondering how it can be implemented for a locator.

I was confused as to how you would list the data in the grid particularly with the field headings as they are defined differently.

HemingZhu

Hi Manish,

I only recently posted this (around an hour ago) so am still waiting for a response 🙂

There is a ESRI sample which binding an identify results to a data grid(http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/find_map_datagrid.html). The process is pretty similar. 1. map each of your AddressCandidate.attributes to items(an array). 2. Create a data object that contains items. 3. Create data store and bind to grid.
Note: When you create a locator in ArcMap Desktop, check the "Reference data ID" checkbox under Output Fields. In doing so, you can assign this Reference data ID as identifier in your data object. Later on when interact your datagrid and map, you can use this ID to connect the address points on the map with the records on the datagrid. Hope my explaination makes sense to you.

ChrisBuckmaster1

Hi Manish,

I only recently posted this (around an hour ago) so am still waiting for a response 🙂

ManishkumarPatel

Were you able to find any solution to this?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

All Communities
Recent Posts
Followed Content
Community Help

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