Display and Tie datagrid to graphic circle radius query

Question

I am drawing a circle radius at one mile and selecting all features that fall within the circle. I want to highlight the selected features and show them in a data grid/ table, and as i click around the map, to update the table along with the selected features. I am able to draw the circle and select the features. i'm also able to console.log the output, but can't figure out how to create the datagrid thats tied the the selected records and clear the table on each new selection. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Buffertitle> <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } #messages { background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 20px; z-index: 40; } #drop { background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 105px; z-index: 40; } style> <script src="http://js.arcgis.com/3.11/">script> <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/tasks/query", "esri/geometry/Circle", "esri/units", "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", "esri/config", "esri/Color", "dojo/dom", "dijit/form/ComboBox", "dojo/domReady!" ], function ( Map, FeatureLayer, Query, Circle, Units, Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, esriConfig, Color, dom ) { // use a proxy page if a URL generated by this page is greater than 2000 characters // // this should not be needed as nearly all query & select functions are performed on the client esriConfig.defaults.io.proxyUrl = "/proxy/"; map = new Map("mapDiv", { basemap: "streets", center: [-81.00, 34.000], zoom: 14, slider: false }); //selected features are clicked a popup window will appear displaying the content defined in the info template. var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", { outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "TRACT", "BLOCK"] }); // selection symbol used to draw the selected census block points within the buffer polygon var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 6, new SimpleLineSymbol( SimpleLineSymbol.STYLE_NULL, new Color([200, 120, 101, 0.9]), 1), new Color([200, 0, 0, 1]) ); featureLayer.setSelectionSymbol(symbol); //make unselected features invisible var nullSymbol = new SimpleMarkerSymbol().setSize(0); featureLayer.setRenderer(new SimpleRenderer(nullSymbol)); map.addLayer(featureLayer); var circleSymb = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, new Color([105, 105, 105]), 2 ), new Color([255, 255, 0, 0.25]) ); var circle; //when the map is clicked create a buffer around the click point of the specified distance. map.on("click", function (evt) { selbuf = document.FormSelection.BufferSelection.selectedIndex; var BufferSelection = document.FormSelection.BufferSelection.options[selbuf].value; circle = new Circle({ center: evt.mapPoint, geodesic: true, radius: BufferSelection, radiusUnit: Units.MILES }); map.graphics.clear(); map.infoWindow.hide(); var graphic = new Graphic(circle, circleSymb); map.graphics.add(graphic); var query = new Query(); query.geometry = circle; featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (results) { console.log(results) var features = results.features; console.log(features) }); }); }); script> head> <body> <span id="messages">Click on the map to select by radius within mile.span> <span id="drop"> Select Radius Size <form name="FormSelection"> <select name="BufferSelection"> <option>1option> <option>2option> <option>10option> select> form> span> <div id="mapDiv">div> body> html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Here is a sample that is almost exactly what you are describing. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Map with a Dojo dGrid</title> <link rel="stylesheet" href="http://js.arcgis.com/3.25/dojo/resources/dojo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/dgrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.25/dgrid/css/skins/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.25/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.25/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } #container { height: 100%; visibility: hidden; } #bottomPane { height: 200px; } .left { float: left; width: 50%; overflow: hidden; height: 200px; } .right { float: left; width: 50%; overflow: hidden; height: 200px; } .dgrid { border: none; } .field-id { cursor: pointer; } </style> <script src="http://js.arcgis.com/3.25/"></script> <script> // load dgrid, esri and dojo modules // create the grid and the map // then parse the dijit layout dijits require([ "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dojo/_base/array", "dojo/dom-style", "dojo/dom-attr", "dijit/registry", "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/Color", "esri/config", "esri/renderers/SimpleRenderer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/geometry/Circle", "esri/graphic", "esri/dijit/PopupTemplate", "esri/InfoTemplate", "dojo/_base/declare", "dojo/number", "dojo/on", "dojo/_base/lang", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Grid, Selection, Memory, array, domStyle, domAttr, registry, Map, FeatureLayer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Color, esriConfig, SimpleRenderer, QueryTask, Query, Circle, Graphic, PopupTemplate, InfoTemplate, declare, dojoNum, on, lang, parser ) { esriConfig.defaults.io.proxyUrl = "proxy/Proxy.ashx" parser.parse(); // create the dgrid window.grid = new(declare([Grid, Selection]))({ // use Infinity so that all data is available in the grid bufferRows: Infinity, columns: { "id": "ID", "popuplation": { "label": "2000 Population", "formatter": dojoNum.format }, "households": "Households", "houseunits": "House Units" } }, "grid"); // add a click listener on the ID column grid.on(".field-id:click", selectBlkPnt); grid.on("th.field-households:mouseover", function(evt){ if(domAttr.get(evt.target, "title") !== "Blah Blah"){ domAttr.set(evt.target, "title", "Blah Blah"); } }); // create the dgrid window.grid2 = new(declare([Grid, Selection]))({ // use Infinity so that all data is available in the grid bufferRows: Infinity, columns: { "id": "ID", "popuplation": { "label": "2000 Population", "formatter": dojoNum.format }, "white": "White", "black": "Black", "asian": "Asian" } }, "grid2"); window.map = new Map("map", { basemap: "streets", center: [-95.249, 38.954], zoom: 14, }); window.blockUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0"; window.blockGroupURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1"; window.outFields = ["OBJECTID", "POP2000", "HOUSEHOLDS", "HSE_UNITS"]; window.bgoutFields = ["OBJECTID", "POP2000", "WHITE", "BLACK", "ASIAN"]; var fl = new FeatureLayer(window.blockUrl, { id: "blockPnts", outFields: window.outFields }); var fl2 = new FeatureLayer(window.blockGroupURL, { id: "blockGroup", outFields: window.bgoutFields }); // Selection symbol used to draw the selected census block points within the buffer polygon var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol( SimpleLineSymbol.STYLE_NULL, new Color([247, 34, 101, 0.9]), 1 ), new Color([207, 34, 171, 0.5]) ); fl.setSelectionSymbol(symbol); // Selection symbol used to draw the selected census block points within the buffer polygon var symbol2 = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([247, 0, 0, 1]), 3 ), new Color([0, 0, 0, 0.5]) ); fl2.setSelectionSymbol(symbol2); // Make unselected features invisible var nullSymbol = new SimpleMarkerSymbol().setSize(0); fl.setRenderer(new SimpleRenderer(nullSymbol)); // Make unselected features invisible var nullSymbol2 = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL).setOutline(null); fl2.setRenderer(new SimpleRenderer(nullSymbol2)); fl.on("click", selectGrid); // change cursor to indicate features are click-able fl.on("mouse-over", function() { window.mapClickEvt.pause(); map.setMapCursor("pointer"); }); fl.on("mouse-out", function() { setTimeout(function() { window.mapClickEvt.resume(); }, 800); map.setMapCursor("default"); }); map.addLayer(fl); map.addLayer(fl2); var circleSymb = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, new Color([105, 105, 105]), 2 ), new Color([255, 255, 0, 0.25]) ); var circle; // When the map is clicked create a buffer around the click point of the specified distance window.mapClickEvt = on.pausable(map, "click", function(evt) { circle = new Circle({ center: evt.mapPoint, geodesic: true, radius: 1, radiusUnit: "esriMiles" }); map.graphics.clear(); var graphic = new Graphic(circle, circleSymb); map.graphics.add(graphic); var query = new Query(); query.geometry = circle; // Use a fast bounding box query. It will only go to the server if bounding box is outside of the visible map. fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer); fl2.selectFeatures(query, FeatureLayer.SELECTION_NEW, selectInBuffer2) }); function selectInBuffer2(features) { console.info(features); var data = array.map(features, function(feature) { return { // property names used here match those used when creating the dgrid "id": feature.attributes[window.bgoutFields[0]], "popuplation": feature.attributes[window.bgoutFields[1]], "white": feature.attributes[window.bgoutFields[2]], "black": feature.attributes[window.bgoutFields[3]], "asian": feature.attributes[window.bgoutFields[4]] }; }); var memStore = new Memory({ data: data }); window.grid2.set("store", memStore); } function selectInBuffer(features) { var data = array.map(features, function(feature) { return { // property names used here match those used when creating the dgrid "id": feature.attributes[window.outFields[0]], "popuplation": feature.attributes[window.outFields[1]], "households": feature.attributes[window.outFields[2]], "houseunits": feature.attributes[window.outFields[3]] }; }); var memStore = new Memory({ data: data }); window.grid.set("store", memStore); } map.on("load", function(evt) { // show the border container now that the dijits // are rendered and the map has loaded domStyle.set(registry.byId("container").domNode, "visibility", "visible"); }); // fires when a row in the dgrid is clicked function selectBlkPnt(e) { map.graphics.clear(); var fl = map.getLayer("blockPnts"); var query = new Query(); query.objectIds = [parseInt(e.target.innerHTML, 10)]; query.returnGeometry = true; fl.queryFeatures(query, function(results) { var gra = results.features[0].clone(); var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol( SimpleLineSymbol.STYLE_NULL, new Color([247, 247, 0, 1]), 1 ), new Color([247, 247, 0, 0.9]) ); gra.setSymbol(symbol); map.graphics.add(gra); }); } // fires when a feature on the map is clicked function selectGrid(e) { var id = e.graphic.attributes.OBJECTID; // select the corresponding row in the grid // and make sure it is in view grid.clearSelection(); grid.select(id); grid.row(id).element.scrollIntoView(); } }); </script> </head> <body class="tundra"> <div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', gutters: false"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'"></div> <div id="bottomPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> <div id="grid" class="left"></div> <div id="grid2" class="right"></div> </div> </div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍