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

populate a datagrid from query results

evanpicard

So I'm a step further along in my geocode query project - and again I am spinning my wheels.
I've successfully
geocoded an address > queried zipcode layer to ascertain population density > create buffers dependant on density > queried Sales reps within those buffers

so I've got the reps queried, and have them in a feature set. If I send

console.log(repFet)

I get all the sales rep info im looking for in the console.
I'm trying to build this attribute data into a clickable table, but I'm getting nowhere.
Help?!

At this point in the code, the buffers have been created already, and the reps have been queried. The following gets fired upon completion of the sales rep query:

       function doRepManager(fset){ //draws the rep points, fires populateTable            var symbol = new esri.symbol.SimpleMarkerSymbol();           symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;           symbol.setSize(6);           symbol.setColor(new dojo.Color([219, 112, 147, 1]));           var repResultFeatures = fset.features;           for (var i = 0, il = repResultFeatures.length; i < il; i++) {             var repGraphic = repResultFeatures;             repGraphic.setSymbol(symbol);             map.graphics.add(repGraphic);             populateTable(repResultFeatures);           };        };

Then populateTable(repResultFeatures); launches, but I get nothing in my data grid:

               function populateTable(repFet){   //creates and populates the dojo datagrid          console.log(repFet);           var items = dojo.map(repFet,function(result){           return repFet.features.attributes;           });           //Create data object to be used in store             var data = {               identifier: "rep_no",  //This field needs to have unique values               items: items             };              //Create data store and bind to grid.             store = new dojo.data.ItemFileReadStore({ data:data });             var grid = dijit.byId('grid');             grid.setStore(store);           };

Thanks.

Find more posts tagged with

Accepted answers

HemingZhu

Still no joy in mudville. No response here either.

combined function:

       function doRepManager(fset){ //draws the rep points, fires populateTable            var infoTemplate = new esri.InfoTemplate("Sales Rep: ${NAME}", "${*}");           var symbol = new esri.symbol.SimpleMarkerSymbol();           symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;           symbol.setSize(6);           symbol.setColor(new dojo.Color([219, 112, 147, 1]));           var repResultFeatures = fset.features;           for (var i = 0, il = repResultFeatures.length; i < il; i++) {             var repGraphic = repResultFeatures;             repGraphic.setSymbol(symbol);             map.graphics.add(repGraphic);             repGraphic.setInfoTemplate(infoTemplate);             map.graphics.add(repGraphic);                       };                      //create array of attributes           console.log(fset.features)           var items = dojo.map(fset,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: "rep_no",  //This field needs to have unique values             label: "rep_no", //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);         };

The following code ties the grid with the query results interactively. All you need to do is define a dojo datagrid in you markup.

<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowSelector:'0px', autoWidth:'ture', autoHeight:'true'">              <thead>                  <tr><th field="OBJECTID" formatter="makeZoomButton" width="40px">View</th>                     <th field="ACREAGE" width="60px">Acreage</th>                     <th field="PIN" width="250px">Property PIN</th>                      <th field="OWNER" width ="250px">Property Owner</th>                      <th field="ADDR_1" width="200px">Property Address</th>                      <th field="CITY" width ="60px">City</th>                      <th field="STATE" width="50px">State</th>                     <th field="ZIP" width ="80px">Zip Code</th>                      <th field="LEGAL1" width="200px">Legal Notes</th>                                        </tr>              </thead>          </table>

Once you did that, run the codes similiar to the following to tie the grid data store to featureSet. features.

  queryTask.execute(query, function (featureSet) {             //alert("number of parcels are found=" + featureSet.features.length);             if (featureSet.features.length > 0) {                 var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new dojo.Color([100, 100, 100]), 1), new dojo.Color([255, 0, 0, 0.20]));                 var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 3), new dojo.Color([255, 0, 0, 0.20]));                  var items = [];                 dojo.forEach(featureSet.features, function (feature) {                     var graphic = feature;                     graphic.setSymbol(symbol);                     map.graphics.add(graphic);                     items.push(feature.attributes);                 });                 var data = {                     identifier: "OBJECTID",                     items: items                 };                 store = new dojo.data.ItemFileReadStore({                     data: data                 });                 grid.setStore(store);                 //grid.selection.clear();                                graphicHandler = dojo.connect(map.graphics, "onClick", function (evt) {                     var clickedGraphic = evt.graphic;                     dojo.forEach(map.graphics.graphics, function (graphic) {                         if (clickedGraphic === graphic) {                             graphic.setSymbol(highlightSymbol);                             //map.setExtent(graphic.geometry.getExtent());                         }                         else {                             graphic.setSymbol(symbol);                         }                     });                      grid.selection.clear();                     //highlight the coorespondent row in datagrid.                     var item;                     for (var i = 0; i < grid.rowCount; i++) {                         item = grid.getItem(i);   //item = grid._by_idx.item;                                              if (clickedGraphic.attributes.OBJECTID == item.OBJECTID) {                             grid.selection.setSelected(i, true) //grid.focus.setFocusIndex(i, 0); //grid.selectedIndex = i;                                            }                     }                 });              }             else {                 alert("No parcel property is found");             }          });

Let me know if you have any questions.

All comments

evanpicard

Thank you. Worked perfectly.
I already had the table set up.
In reality all I had to do was change

          var items = dojo.map(fset,function(result){
            var graphic = result.feature;
            graphic.setSymbol(symbol);
            map.graphics.add(graphic);
            return result.feature.attributes;
          });

                var items = [];
                dojo.forEach(featureSet.features, function (feature) {
                    var graphic = feature;
                    graphic.setSymbol(symbol);
                    map.graphics.add(graphic);
                    items.push(feature.attributes);
                });

Thanks again!
Now, on to the next hurdle....

HemingZhu

Still no joy in mudville. No response here either.

combined function:

       function doRepManager(fset){ //draws the rep points, fires populateTable            var infoTemplate = new esri.InfoTemplate("Sales Rep: ${NAME}", "${*}");           var symbol = new esri.symbol.SimpleMarkerSymbol();           symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;           symbol.setSize(6);           symbol.setColor(new dojo.Color([219, 112, 147, 1]));           var repResultFeatures = fset.features;           for (var i = 0, il = repResultFeatures.length; i < il; i++) {             var repGraphic = repResultFeatures;             repGraphic.setSymbol(symbol);             map.graphics.add(repGraphic);             repGraphic.setInfoTemplate(infoTemplate);             map.graphics.add(repGraphic);                       };                      //create array of attributes           console.log(fset.features)           var items = dojo.map(fset,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: "rep_no",  //This field needs to have unique values             label: "rep_no", //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);         };

The following code ties the grid with the query results interactively. All you need to do is define a dojo datagrid in you markup.

<table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowSelector:'0px', autoWidth:'ture', autoHeight:'true'">              <thead>                  <tr><th field="OBJECTID" formatter="makeZoomButton" width="40px">View</th>                     <th field="ACREAGE" width="60px">Acreage</th>                     <th field="PIN" width="250px">Property PIN</th>                      <th field="OWNER" width ="250px">Property Owner</th>                      <th field="ADDR_1" width="200px">Property Address</th>                      <th field="CITY" width ="60px">City</th>                      <th field="STATE" width="50px">State</th>                     <th field="ZIP" width ="80px">Zip Code</th>                      <th field="LEGAL1" width="200px">Legal Notes</th>                                        </tr>              </thead>          </table>

Once you did that, run the codes similiar to the following to tie the grid data store to featureSet. features.

  queryTask.execute(query, function (featureSet) {             //alert("number of parcels are found=" + featureSet.features.length);             if (featureSet.features.length > 0) {                 var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new dojo.Color([100, 100, 100]), 1), new dojo.Color([255, 0, 0, 0.20]));                 var highlightSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 3), new dojo.Color([255, 0, 0, 0.20]));                  var items = [];                 dojo.forEach(featureSet.features, function (feature) {                     var graphic = feature;                     graphic.setSymbol(symbol);                     map.graphics.add(graphic);                     items.push(feature.attributes);                 });                 var data = {                     identifier: "OBJECTID",                     items: items                 };                 store = new dojo.data.ItemFileReadStore({                     data: data                 });                 grid.setStore(store);                 //grid.selection.clear();                                graphicHandler = dojo.connect(map.graphics, "onClick", function (evt) {                     var clickedGraphic = evt.graphic;                     dojo.forEach(map.graphics.graphics, function (graphic) {                         if (clickedGraphic === graphic) {                             graphic.setSymbol(highlightSymbol);                             //map.setExtent(graphic.geometry.getExtent());                         }                         else {                             graphic.setSymbol(symbol);                         }                     });                      grid.selection.clear();                     //highlight the coorespondent row in datagrid.                     var item;                     for (var i = 0; i < grid.rowCount; i++) {                         item = grid.getItem(i);   //item = grid._by_idx.item;                                              if (clickedGraphic.attributes.OBJECTID == item.OBJECTID) {                             grid.selection.setSelected(i, true) //grid.focus.setFocusIndex(i, 0); //grid.selectedIndex = i;                                            }                     }                 });              }             else {                 alert("No parcel property is found");             }          });

Let me know if you have any questions.

evanpicard

Still no joy in mudville. No response here either.

combined function:

       function doRepManager(fset){ //draws the rep points, fires populateTable 
          var infoTemplate = new esri.InfoTemplate("Sales Rep: ${NAME}", "${*}");
          var symbol = new esri.symbol.SimpleMarkerSymbol();
          symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
          symbol.setSize(6);
          symbol.setColor(new dojo.Color([219, 112, 147, 1]));
          var repResultFeatures = fset.features;
          for (var i = 0, il = repResultFeatures.length; i < il; i++) {
            var repGraphic = repResultFeatures;
            repGraphic.setSymbol(symbol);
            map.graphics.add(repGraphic);
            repGraphic.setInfoTemplate(infoTemplate);
            map.graphics.add(repGraphic);            
          };
          
          //create array of attributes
          console.log(fset.features)
          var items = dojo.map(fset,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: "rep_no",  //This field needs to have unique values
            label: "rep_no", //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);
        };

evanpicard

Still no joy in mudville. No response here either.

combined function:

       function doRepManager(fset){ //draws the rep points, fires populateTable 
          var infoTemplate = new esri.InfoTemplate("Sales Rep: ${NAME}", "${*}");
          var symbol = new esri.symbol.SimpleMarkerSymbol();
          symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
          symbol.setSize(6);
          symbol.setColor(new dojo.Color([219, 112, 147, 1]));
          var repResultFeatures = fset.features;
          for (var i = 0, il = repResultFeatures.length; i < il; i++) {
            var repGraphic = repResultFeatures;
            repGraphic.setSymbol(symbol);
            map.graphics.add(repGraphic);
            repGraphic.setInfoTemplate(infoTemplate);
            map.graphics.add(repGraphic);            
          };
          
          //create array of attributes
          console.log(fset.features)
          var items = dojo.map(fset,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: "rep_no",  //This field needs to have unique values
            label: "rep_no", //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);
        };

ChadWilcomb

I haven't tested this or anything, but what happens if you try using a single function like this one, adapted from the sample to match up with your code:

     function doRepManager(fset) {
        
        map.graphics.clear(); //not sure if you want to clear the graphics or not, but just in case 
        var symbol = new esri.symbol.SimpleMarkerSymbol();
          symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
          symbol.setSize(6);
          symbol.setColor(new dojo.Color([219, 112, 147, 1]));

  //create array of attributes
        var items = dojo.map(fset,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: "rep_no",  //This field needs to have unique values
          label: "rep_no", //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);
    }

Join the Conversation

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

Quick Links

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