AnsweredAssumed Answered

populate a datagrid from query results

Question asked by empicard on Apr 2, 2012
Latest reply on Apr 5, 2012 by empicard
  • Comment • 5
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[i];             repGraphic.setSymbol(symbol);             map.graphics.add(repGraphic);             populateTable(repResultFeatures[i]);           };        };


Then populateTable(repResultFeatures[i]); 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.
hzhu
hzhu Apr 3, 2012 11:56 AM
Correct Answer
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[i];             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[i].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.
See the reply in context
No one else had this question

Outcomes