topic Zoom to feature from Datagrid after spatial query in ArcGIS JavaScript Maps SDK Questions

Zoom to feature from Datagrid after spatial query

RyanSellman — Thu, 11 Sep 2014 13:22:36 GMT

I am trying to set up a section in my app where you can search for features within a layer and select features within that same layer. The results of each of these need to feed to one datagrid, from which users can click rows and zoom to the feature. As it stands now, both the findtask and spatial query execute properly and feed to one datagrid. However zooming to a selected feature from the datagrid only works for data that has been supplied by the find task. When I do the spatial query, the graphics draw, the datagrid populates but I get the following error when I click on a row:

"Uncaught TypeError: Cannot read property 'geometry' of undefined"

Here's the findtask:

findManholesTask = new FindTask("http://summitgis.summitoh.net:6080/arcgis/rest/services/DOES/MapServer/");

map.on("load", function() {

findManholesParams = new FindParameters();

findManholesParams.returnGeometry = true;

findManholesParams.layerIds = [2];

findManholesParams.searchFields = ["UNAME"];

findManholesParams.outSpatialReference = map.spatialReference;

});

function doDoesManholeFind() {

findManholesParams.searchText = dom.byId("doesManholeText").value;

dojo.byId('manhole-result-count').innerHTML = "Searching...";

findManholesTask.execute(findManholesParams, showManholesResults);

}

function showManholesResults(results) {

dojo.byId('manhole-result-count').innerHTML = "Results: " + results.length;

if (results.length > 0) {

map.graphics.clear();

var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));

var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1);

var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));

var items5 = arrayUtils.map(results, function(result) {

var graphic = result.feature;

switch (graphic.geometry.type) {

case "point":

graphic.setSymbol(markerSymbol);

break;

case "polyline":

graphic.setSymbol(lineSymbol);

break;

case "polygon":

graphic.setSymbol(polygonSymbol);

break;

}

map.graphics.add(graphic);

return result.feature.attributes;

});

var data5 = {

identifier: "OBJECTID",

label: "OBJECTID",

items: items5

};

var store5 = new ItemFileReadStore({

data: data5

});

var grid = registry.byId("manholeGrid");

grid.setStore(store5);

grid.on("rowclick", onRowClickHandler);

//map.centerAndZoom(centerPoint, zoom);

} else {

alert("No Utility Feature or Parcel found! Please enter a valid PARID, UNAME, PIPEID, Plant ID, PUMPID or Name.");

}

The query:

dojo.connect(map, "onLoad", function(map) {

//initialize the toolbar

toolBar2 = new esri.toolbars.Draw(map);

dojo.connect(toolBar2, "onDrawEnd", onDrawEnd);

});

var featureLayerUrl = "http://summitgis.summitoh.net:6080/arcgis/rest/services/DOES/MapServer/2";

featureLayer = new esri.layers.FeatureLayer(featureLayerUrl, {

mode: esri.layers.FeatureLayer.MODE_ONDEMAND

});

featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(8).setColor(new dojo.Color([160, 214, 238])));

map.addLayer(featureLayer);

function onDrawEnd(extent) {

toolBar2.deactivate();

var query = new esri.tasks.Query();

query.geometry = extent;

featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(features, selectionMethod) {

var items30 = dojo.map(features, function(feature) {

return feature.attributes;

});

var data30 = {

identifier: "OBJECTID",

items: items30

};

var store30 = new dojo.data.ItemFileReadStore({

data: data30

});

var manholeGrid = registry.byId("manholeGrid");

manholeGrid.on("rowclick", onRowClickHandler);

manholeGrid.setStore(store30);

});

}

My row click handler function:

function onRowClickHandler(evt) {

var clickedObjectf = evt.grid.getItem(evt.rowIndex).OBJECTID;

var selectedObjectf;

var distance = 50;

dojo.forEach(map.graphics.graphics, function(graphicf) {

if ((graphicf.attributes) && graphicf.attributes.OBJECTID === clickedObjectf) {

selectedObjectf = graphicf;

return;

}

});

if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Point') {

var PointExtent = new esri.geometry.Extent({

"xmin": selectedObjectf.geometry.x - distance,

"ymin": selectedObjectf.geometry.y - distance,

"xmax": selectedObjectf.geometry.x + distance,

"ymax": selectedObjectf.geometry.y + distance,

"spatialReference": {

"wkid": 3728

}

});

map.setExtent(PointExtent);

} else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polygon') {

var selectedParcel = selectedObjectf.geometry.getExtent();

map.setExtent(selectedParcel.expand(3));

} else if (selectedObjectf.geometry.declaredClass == 'esri.geometry.Polyline') {

var selectedStreetl = selectedObjectf.geometry.getExtent();

map.setExtent(selectedStreetl.expand(3));

}

Does anyone have an idea why the row click will not work after the spatial query is performed??

Thanks for any help in advance!!

Ryan

Re: Zoom to feature from Datagrid after spatial query

KenBuja — Thu, 11 Sep 2014 14:09:16 GMT

I'm guessing it's failing in the if statements. Have you checked whether selectedObjectf is null? Go through your forEach loop and make sure that you're getting a valid selectedObjectf

Here's how I do something with a graphic when a row is clicked in a dGrid in one application

function gridSelect(e) {
    var graphicFlash;
    var gridId = e.currentTarget.id;
    var selectedGrid = dijit.byId(gridId);
    var row = selectedGrid.row(e);

    graphicHighlight = findGraphicByAttribute(row.data);

    if (graphicHighlight !== null) {
        switch (graphicHighlight.geometry.type) {
            case "point": case "multipoint":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPoint)
                break;
            case "polyline":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolyline);
                break;
            case "polygon": case "extent":
                graphicFlash = new esri.Graphic(graphicHighlight.geometry, symbolFlashPolygon);
                break;
            }
        map.graphics.add(graphicFlash);
    }
}

function findGraphicByAttribute(attributes) {
    for (i = 0; i < layerResultsGraphic.graphics.length; i++) {
        if (JSON.stringify(layerResultsGraphic.graphics.attributes) === JSON.stringify(attributes)) { return layerResultsGraphic.graphics; }
    }
    return null;
}

Re: Zoom to feature from Datagrid after spatial query

JasonZou — Thu, 11 Sep 2014 17:46:24 GMT

Here is the problem. You add the find result to map.graphics, but the query result is in featureLayer. Inside onRowClickHandler, you only go through map.graphics.graphics trying to find the matching graphic for the selected row in the query result, which won't find the match, So selectedObjectf will always be null, which triggers the error when it hits selectedObjectf.geometry.

To resolve the issue, you can go through featureLayer.graphics to find the matching graphic if the query result row is clicked.

Good luck.

Re: Zoom to feature from Datagrid after spatial query

RyanSellman — Fri, 12 Sep 2014 12:36:28 GMT

Jason,

Thanks so much for your response. With your suggestion, I finally got it working!

Ryan

Re: Zoom to feature from Datagrid after spatial query

JasonZou — Fri, 12 Sep 2014 15:29:45 GMT

Glad to help:)