ArcGIS Javascrip API: Showing data of the selected features in a Dojo data grid

AdamBuono — Tue, 11 Mar 2014 13:32:01 GMT

I am trying to add show data in a Dojo data grid of the selected features, here is the ESRI original solution:

http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=fl_selectfeatures

The "findFeatures" function gets the list of selected features but "queryRelatedFeatures" method is failing to execute.

Any help will be appreciated:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples     on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Layer in a map service - [ON-DEMAND]</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/Grid.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/ClaroGrid.css"/>     <script type="text/javascript">djConfig = { parseOnLoad:true };</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>      <script type="text/javascript">         dojo.require("esri.map");         dojo.require("esri.layers.FeatureLayer");         dojo.require("esri.toolbars.navigation");         dojo.require("dijit.Toolbar");         dojo.require("dijit.layout.BorderContainer");         dojo.require("dijit.layout.ContentPane");         dojo.require("esri.tasks.query");         dojo.require("dojox.grid.DataGrid");         dojo.require("dojo.data.ItemFileReadStore");          var selectionToolbar,  grid,featureLayer,navToolbar;          function init() {             var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) );             var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true });             dojo.connect(map, "onLoad", initSelectToolbar);             var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");             map.addLayer(baseMapLayer);              var fieldsSelectionSymbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5]));             fieldsSelectionSymbol.setOutline(new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2));              var content = "<b>Status</b>: ${STATUS}" +                     "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +                     "<br><b>Total Acres</b>: ${APPROXACRE}" +                     "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";             var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);              featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND,                 infoTemplate: infoTemplate,                 outFields: ["*"]             });               featureLayer.setDefinitionExpression("PROD_GAS='Yes'");             featureLayer.setSelectionSymbol(fieldsSelectionSymbol);              dojo.connect(featureLayer, "onSelectionComplete", findFeatures);              dojo.connect(featureLayer, "onSelectionClear", function(features) {                 //dojo.byId('messages').innerHTML = "<i>No Selected Fields</i>";             });              navToolbar = new esri.toolbars.Navigation(map);              dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);              map.addLayer(featureLayer);         }          function initSelectToolbar(map) {             selectionToolbar = new esri.toolbars.Draw(map);             var selectQuery = new esri.tasks.Query();              dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {                 selectionToolbar.deactivate();                 selectQuery.geometry = geometry;                 featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);             });          }         function extentHistoryChangeHandler() {             dijit.byId("zoomprev").disabled = navToolbar.isFirstExtent();             dijit.byId("zoomnext").disabled = navToolbar.isLastExtent();         }           function findFeatures(features) {             var relatedQuery = new esri.tasks.RelationshipQuery();             var queryIds = dojo.map(features, function (rec) { return rec.attributes.OBJECTID });             relatedQuery.outFields = ["*"];             relatedQuery.relationshipId = 0;             relatedQuery.objectIds = [queryIds];              featureLayer.queryRelatedFeatures(relatedQuery, function (relatedRecords) {                 var fset = relatedRecords[queryIds];                 var items = dojo.map(fset.features, function (feature) {                     return feature.attributes;                 });                  var data = {                     identifier: "OBJECTID",                     label: "OBJECTID",                     items: items                 };                   store = new dojo.data.ItemFileReadStore({ data: data });                 grid.setStore(store);                 grid.setQuery({ OBJECTID: '*' });             });          }          dojo.addOnLoad(init);     </script>  </head>  <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width:600px; height:700px;">      <div dojotype="dijit.layout.ContentPane" region="top">     <button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>     <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button>     <button id="zoomprev" dojoType="dijit.form.Button" onclick="navToolbar.zoomToPrevExtent();">Prev</button>     <button id="zoomnext" dojoType="dijit.form.Button" onclick="navToolbar.zoomToNextExtent();">Next</button>      </div>      <div id="map" region="center" dojotype="dijit.layout.ContentPane" style="border:1px solid #000;"></div>      <div dojotype="dijit.layout.ContentPane" region="bottom" style="height:150px; width:100%;">         <div> </div>     <span id="messages"></span>         <div>             <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowSelector="20px" selectionMode="none" style="height:300px; width:600px">                 <thead>                 <tr>                     <th field="OBJECTID" width="100px">ID</th>                     <th field="STATUS" width="100px">Status</th>                     <th field="CUMM_GAS" width="150px">Total GAS</th>                     <th field="APPROXACRE" Width="150px">Total Acre</th>                 </tr>                 </thead>             </table>         </div>     </div>  </div> </body> </html>

Re: ArcGIS Javascrip API: Showing data of the selected features in a Dojo data grid

JakeSkinner — Wed, 12 Mar 2014 13:39:03 GMT

Hello,

You will just need to update the 'relatedQuery.relationshipId' from 0 to 2:

relatedQuery.relationshipId = 2;

[ATTACH=CONFIG]32148[/ATTACH]

Re: ArcGIS Javascrip API: Showing data of the selected features in a Dojo data grid

AdamBuono — Wed, 12 Mar 2014 17:09:47 GMT

working thanks a lot for the help.

topic ArcGIS Javascrip API: Showing data of the selected features in a Dojo data grid in ArcGIS JavaScript Maps SDK Questions

ArcGIS Javascrip API: Showing data of the selected features in a Dojo data grid

Re: ArcGIS Javascrip API: Showing data of the selected features in a Dojo data grid

Re: ArcGIS Javascrip API: Showing data of the selected features in a Dojo data grid