grid select example

jaykapalczynski — Tue, 05 Aug 2014 14:13:20 GMT

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.sortable = true;

} else {

columns.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]),

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

});

}

Re: grid select example

RiyasDeen — Tue, 05 Aug 2014 14:20:44 GMT

Point does not support getExtent() method, in the case of point you'll have to build your own envelope from the point coordinates.

Re: grid select example

RiyasDeen — Tue, 05 Aug 2014 14:25:30 GMT

var extent = null;

var extentWidth = 1000;

if (features[0].geometry.type.toUpperCase() === "POINT"){

extent = new Extent(features[0].geometry.x - extentWidth, features[0].geometry.y - extentWidth, features[0].geometry.x + extentWidth, features[0].geometry.y + extentWidth, features[0].geometry.spatialReference)

}

else{

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

}

Re: grid select example

jaykapalczynski — Tue, 05 Aug 2014 14:44:04 GMT

Thanks a ton......what would I do for a LINE?

Re: grid select example

RobertScheitlin__GISP — Tue, 05 Aug 2014 19:23:07 GMT

Jay,

A line is already covered in Riyas's code. It is only the point that does not have an extent and that is why he has the if point condition.

Re: grid select example

RickeyFight — Fri, 13 Nov 2015 00:18:15 GMT

What part did you add this to. I have not figured it out yet.

jay kapalczynski What line of the original template did you get this to work?

EDIT:

I found this

developer-support/web-js/datagrid-with-zoom-button-point-feature at master · Esri/developer-support · GitHub

topic grid select example in ArcGIS JavaScript Maps SDK Questions

grid select example

Re: grid select example

Re: grid select example

Re: grid select example

Re: grid select example

Re: grid select example