AnsweredAssumed Answered

grid select example

Question asked by jay.kapalczynski on Aug 5, 2014
Latest reply on Nov 12, 2015 by dafiter

I am using this example...

 

DataGrid with zoom button | ArcGIS API for JavaScript

 

I replaced the reference of the polygon Map Service with my own and it works FINE.

I then try it with a Point Feature and it breaks...

 

Is there something I am doing wrong for the Point feature...I replaced the SELECTION symbol for that of a point

 

Looking to modify this for both a point and line feature....

 

 

 

var StatesGrid = declare([Grid, Selection]);

 

        var columns = [{

          label: "",  //wasn't able to inject an HTML <div> with image here

          field: "OBJECTID",

          formatter: makeZoomButton

        },{

          label: "unknown",

          field: "SITENAME"

        }];

 

        //restrict sorting to the state name field

        for (var i = 0; i < columns.length; i++) {

          if (i == 1) {

            columns[i].sortable = true;

          } else {

            columns[i].sortable = false;

          }

        }

 

        grid = new StatesGrid({

          bufferRows: Infinity,

          columns: columns

        }, "grid");

 

//add the states demographic data

        var statesLayer = new FeatureLayer("https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/Public/DGIF_Public/FeatureServer/1", {

          mode: FeatureLayer.MODE_SELECTION,

          outFields: ["OBJECTID", "SITENAME"]

        });

 

//define a selection symbol

        var GridSelectsymbol = new SimpleMarkerSymbol(

          SimpleMarkerSymbol.STYLE_CIRCLE,

          12,

          new SimpleLineSymbol(

            SimpleLineSymbol.STYLE_SOLID,

            new Color([0, 0, 255, 0.5]),

            6

          ),

          new Color([0, 0, 255])

        );

 

statesLayer.setSelectionSymbol(GridSelectsymbol);

 

        statesLayer.on("load", function(evt) {

          var query = new Query();

          query.where = "1=1";

          evt.layer.queryFeatures(query, function(featureSet) {

            var items = array.map(featureSet.features, function(feature) {

              return feature.attributes;

            });

 

            //idProperty must be set manually if value is something other than 'id'

            var memStore1 = new Memory({

              data: items,

              idProperty: "OBJECTID"

            });

            window.grid.set("store", memStore1);

            window.grid.set("sort", "SITENAME");

 

            grid.on(".field-OBJECTID:click", function(e) {

              //retrieve the ObjectId when someone clicks on the magnifying glass

              if (e.target.alt) {

                zoomRow(e.target.alt);

              }

});
  });

        });

 

        app.map.addLayers([statesLayer]);

 

 

function makeZoomButton(id) {

          //set the feature 'id' as the alt value for the image so that it can be used to query below

          var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/ArrowUp.png' alt='" + id + "'";

          zBtn = zBtn + " width='18' height='18'></div>";

          return zBtn;

        }

 

     function zoomRow(id) {

          statesLayer.clearSelection();

          var query1 = new Query();

          query1.objectIds = [id];

          statesLayer.selectFeatures(query1, FeatureLayer.SELECTION_NEW, function(features) {

            //zoom to the selected feature

           var stateExtent = features[0].geometry.getExtent().expand(2.0);

           app.map.setExtent(stateExtent);

          });

     }

Outcomes