<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map with a Dojo dGrid</title> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojo/resources/dojo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/dgrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/skins/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/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; } #grid { height: 100%; } .dgrid { border: none; } .field-id { cursor: pointer; } </style> <script src="http://js.arcgis.com/3.6/"></script> <script> // load dgrid, esri and dojo modules // create the grid and the map // then parse the dijit layout dijits require([ "dojo/ready", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dojo/_base/array", "dojo/dom-style", "dijit/registry", "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/tasks/QueryTask", "esri/tasks/query", "dojo/_base/declare", "dojo/number", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], function ( ready, Grid, Selection, Memory, array, domStyle, registry, Map, FeatureLayer, SimpleFillSymbol, QueryTask, Query, declare, dojoNum, on, parser ) { ready(function () { 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: { "BankName": "Bank Name", "BankAddres": "Bank Address", "Manager": "Manager Name", "Time": "Opening Time" } }, "grid"); // add a click listener on the ID column grid.on(".field-BankName:click", selectState); window.map = new Map("map", { basemap: "streets", center: [-101.426, 42.972], zoom: 4 }); // window.statesUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4"; // window.outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW1M_CY"]; infoSBITemplate = new InfoTemplate("SBI Bank Locations", "Bank Name: ${BankName}<br/>" + "Bank Address: ${BankAddres}<br/>" + "Manager Name: ${Manager}<br/>" + "Opening Time: ${Time}"); window.flSBIUrl = "http://services1.arcgis.com/rHig23wEINZ1MKYI/arcgis/rest/services/SBI_BankLocation/FeatureServer/0"; window.outFields = ["BankName", "BankAddres", "Manager", "Time"]; var fl = new FeatureLayer(window.flSBIUrl, { // BankName: "SBIBank", mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND outFields: window.outFields }); fl.on("load", function () { // fl.maxScale = 0; // show the states layer at all scales // fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3")); }); fl.on("click", selectGrid); // change cursor to indicate features are click-able fl.on("mouse-over", function () { map.setMapCursor("pointer"); }); fl.on("mouse-out", function () { map.setMapCursor("default"); }); map.addLayer(fl); 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"); populateGrid(Memory); // pass a reference to the MemoryStore constructor }); function populateGrid(Memory) { var qt = new QueryTask(window.flSBIUrl); var query = new Query(); query.where = "1=1"; query.returnGeometry = false; query.outFields = window.outFields; qt.execute(query, function (results) { var data = array.map(results.features, function (feature) { return { // property names used here match those used when creating the dgrid "BankName": feature.attributes[window.outFields[0]], "BankAddres": feature.attributes[window.outFields[1]], "Manager": feature.attributes[window.outFields[2]], "Time": feature.attributes[window.outFields[3]] } }); var memStore = new Memory({ data: data }); window.grid.set("store", memStore); }); } // fires when a row in the dgrid is clicked function selectState(e) { // select the feature var fl = map.getLayer("SBIBank"); var query = new Query(); query.objectIds = [parseInt(e.target.innerHTML)]; fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) { if (result.length) { // re-center the map to the selected feature window.map.centerAt(result[0].geometry.getExtent().getCenter()); } else { console.log("Feature Layer query returned no features... ", result); } }); } // fires when a feature on the map is clicked function selectGrid(e) { var id = e.graphic.attributes.OBJECTID; // select the feature that was clicked var query = new Query(); query.objectIds = [id]; var states = map.getLayer("SBIBank"); states.selectFeatures(query, FeatureLayer.SELECTION_NEW); // 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"></div> </div> </div> </body> </html>
Solved! Go to Solution.
require(["esri/InfoTemplate", ... ], function(InfoTemplate, ... ){ ... });
require(["esri/InfoTemplate", ... ], function(InfoTemplate, ... ){ ... });
var memStore = new Memory({ data: data });
var memStore = new Memory({ data: data, idProperty: "BankAddres" });
grid.on(".field-BankName:click", selectState);
grid.on("dgrid-select", function(event){ var rowID = event.rows[0].id; //reference to the selected row. var rowInMemory = window.grid.store.get(rowID[0].id); //reference to the row in memory // do feature layer stuff here });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map with a Dojo dGrid</title> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojo/resources/dojo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/dgrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/skins/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/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; } #grid { height: 100%; } .dgrid { border: none; } .field-id { cursor: pointer; } </style> <script src="http://js.arcgis.com/3.6/"></script> <script> // load dgrid, esri and dojo modules // create the grid and the map // then parse the dijit layout dijits require([ "dojo/ready", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dojo/_base/array", "dojo/dom-style", "dijit/registry", "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/tasks/QueryTask", "esri/tasks/query", "esri/InfoTemplate", "dojo/_base/declare", "dojo/number", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], function ( ready, Grid, Selection, Memory, array, domStyle, registry, Map, FeatureLayer, SimpleFillSymbol, QueryTask, Query, InfoTemplate, declare, dojoNum, on, parser ) { ready(function () { 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", "bankName": "Bank Name", "bankAddres": "Bank Address", "manager": "Manager Name", "time": "Opening Time" } }, "grid"); // add a click listener on the ID column //grid.on(".field-id:click", selectState); grid.on("dgrid-select", function (event) { var rowID = event.rows[0].id; //reference to the selected row. var rowInMemory = window.grid.store.get(rowID[0].id); //reference to the row in memory // do feature layer stuff here var fl = map.getLayer("SBI_BankLocation"); var query = new Query(); //query.objectIds = [parseInt(e.target.innerHTML)]; query.objectIds = [rowID]; fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) { if (result.length) { // re-center the map to the selected feature window.map.centerAt(result[0].geometry.getExtent().getCenter()); } else { console.log("Feature Layer query returned no features... ", result); } }); }); window.map = new Map("map", { basemap: "streets", center: [-101.426, 42.972], zoom: 4 }); // window.statesUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4"; // window.outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW1M_CY"]; infoSBITemplate = new InfoTemplate("SBI Bank Locations", "Bank Name: ${BankName}<br/>" + "Bank Address: ${BankAddres}<br/>" + "Manager Name: ${Manager}<br/>" + "Opening Time: ${Time}"); window.flSBIUrl = "http://services1.arcgis.com/rHig23wEINZ1MKYI/arcgis/rest/services/SBI_BankLocation/FeatureServer/0"; window.outFields = ["id", "BankName", "BankAddres", "Manager", "Time"]; var fl = new FeatureLayer(window.flSBIUrl, { id: "SBI_BankLocation", mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND outFields: window.outFields, infoTemplate: infoSBITemplate }); fl.on("load", function () { fl.maxScale = 0; // show the states layer at all scales // fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3")); }); fl.on("click", selectGrid); // change cursor to indicate features are click-able fl.on("mouse-over", function () { map.setMapCursor("pointer"); }); fl.on("mouse-out", function () { map.setMapCursor("default"); }); map.addLayer(fl); 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"); populateGrid(Memory); // pass a reference to the MemoryStore constructor }); function populateGrid(Memory) { var qt = new QueryTask(window.flSBIUrl); var query = new Query(); query.where = "1=1"; query.returnGeometry = false; query.outFields = window.outFields; qt.execute(query, function (results) { var data = array.map(results.features, function (feature) { return { // property names used here match those used when creating the dgrid "id": feature.attributes[window.outFields[0]], "bankName": feature.attributes[window.outFields[1]], "bankAddres": feature.attributes[window.outFields[2]], "manager": feature.attributes[window.outFields[3]], "time": feature.attributes[window.outFields[4]] } }); var memStore = new Memory({ data: data, idProperty: "id"}); window.grid.set("store", memStore); }); } // fires when a row in the dgrid is clicked function selectState(e) { // select the feature var fl = map.getLayer("SBI_BankLocation"); var query = new Query(); query.objectIds = [parseInt(e.target.innerHTML)]; fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) { if (result.length) { // re-center the map to the selected feature window.map.centerAt(result[0].geometry.getExtent().getCenter()); } else { console.log("Feature Layer query returned no features... ", result); } }); } // fires when a feature on the map is clicked function selectGrid(e) { var id = e.graphic.attributes.id; // select the feature that was clicked var query = new Query(); query.objectIds = [id]; var states = map.getLayer("SBI_BankLocation"); states.selectFeatures(query, FeatureLayer.SELECTION_NEW); // 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"></div> </div> </div> </body> </html>
window.grid = new (declare([Grid, Selection]))({ // use Infinity so that all data is available in the grid bufferRows: Infinity, columns: { "id": "ID", "bankName": "Bank Name", "bankAddres": "Bank Address", "manager": "Manager Name", "time": "Opening Time" } }, "grid");
var grid = new (declare([Grid, Selection]))({ // use Infinity so that all data is available in the grid bufferRows: Infinity, columns: { "id": "ID", "bankName": "Bank Name", "bankAddres": "Bank Address", "manager": "Manager Name", "time": "Opening Time" } }, "grid");
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map with a Dojo dGrid</title> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojo/resources/dojo.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/dgrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/skins/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/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; } #grid { height: 100%; } .dgrid { border: none; } .field-id { cursor: pointer; } </style> <script src="http://js.arcgis.com/3.6/"></script> <script> // load dgrid, esri and dojo modules // create the grid and the map // then parse the dijit layout dijits require([ "dojo/ready", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dojo/_base/array", "dojo/dom-style", "dijit/registry", "esri/map", "esri/layers/FeatureLayer", "esri/symbols/SimpleFillSymbol", "esri/tasks/QueryTask", "esri/tasks/query", "esri/InfoTemplate", "dojo/_base/declare", "dojo/number", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], function ( ready, Grid, Selection, Memory, array, domStyle, registry, Map, FeatureLayer, SimpleFillSymbol, QueryTask, Query, InfoTemplate, declare, dojoNum, on, parser ) { ready(function () { parser.parse(); // create the dgrid var grid = new (declare([Grid, Selection]))({ // use Infinity so that all data is available in the grid bufferRows: Infinity, columns: { "id": "ID", "bankName": "Bank Name", "bankAddres": "Bank Address", "manager": "Manager Name", "time": "Opening Time" } }, "grid"); // add a click listener on the ID column grid.on(".field-id:click", selectState); /* grid.on("dgrid-select", function (event) { var rowID = event.rows[0].id; //reference to the selected row. var rowInMemory = grid.store.get(rowID[0].id); //reference to the row in memory // do feature layer stuff here var fl = map.getLayer("SBI_BankLocation"); var query = new Query(); //query.objectIds = [parseInt(e.target.innerHTML)]; query.objectIds = [rowID]; fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) { if (result.length) { // re-center the map to the selected feature map.centerAt(result[0].geometry.getExtent().getCenter()); } else { console.log("Feature Layer query returned no features... ", result); } }); }); */ map = new Map("map", { basemap: "streets", center: [-101.426, 42.972], zoom: 4 }); // window.statesUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/4"; // window.outFields = ["OBJECTID", "NAME", "MEDNW_CY", "NW1M_CY"]; var infoSBITemplate = new InfoTemplate("SBI Bank Locations", "Bank Name: ${BankName}<br/>" + "Bank Address: ${BankAddres}<br/>" + "Manager Name: ${Manager}<br/>" + "Opening Time: ${Time}"); var flSBIUrl = "http://services1.arcgis.com/rHig23wEINZ1MKYI/arcgis/rest/services/SBI_BankLocation/FeatureServer/0"; var outFields = ["id", "BankName", "BankAddres", "Manager", "Time"]; var fl = new FeatureLayer(flSBIUrl, { id: "SBI_BankLocation", mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND outFields: outFields, infoTemplate: infoSBITemplate }); fl.on("load", function () { fl.maxScale = 0; // show the states layer at all scales // fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3")); }); fl.on("click", selectGrid); // change cursor to indicate features are click-able fl.on("mouse-over", function () { map.setMapCursor("pointer"); }); fl.on("mouse-out", function () { map.setMapCursor("default"); }); map.addLayer(fl); 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"); populateGrid(Memory); // pass a reference to the MemoryStore constructor }); function populateGrid(Memory) { var qt = new QueryTask(flSBIUrl); var query = new Query(); query.where = "1=1"; query.returnGeometry = false; query.outFields = outFields; qt.execute(query, function (results) { var data = array.map(results.features, function (feature) { return { // property names used here match those used when creating the dgrid "id": feature.attributes[outFields[0]], "bankName": feature.attribute[outFields[1]], "bankAddres": feature.attributes[outFields[2]], "manager": feature.attributes[outFields[3]], "time": feature.attributes[outFields[4]] } }); // var memStore = new Memory({ data: data, idProperty: "id" }); var memStore = new Memory({ data: data }); grid.set("store", memStore); }); } // fires when a row in the dgrid is clicked function selectState(e) { // select the feature var fl = map.getLayer("SBI_BankLocation"); var query = new Query(); query.objectIds = [parseInt(e.target.innerHTML)]; fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (result) { if (result.length) { // re-center the map to the selected feature map.centerAt(result[0].geometry.getExtent().getCenter()); } else { console.log("Feature Layer query returned no features... ", result); } }); } // fires when a feature on the map is clicked function selectGrid(e) { var id = e.graphic.attributes.BankAddres; // select the feature that was clicked var query = new Query(); query.objectIds = [id]; var states = map.getLayer("SBI_BankLocation"); states.selectFeatures(query, FeatureLayer.SELECTION_NEW); // 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"></div> </div> </div> </body> </html>
var data = array.map(results.features, function (feature) { return { // property names used here match those used when creating the dgrid "id": feature.attributes[outFields[0]], "bankName": feature.attribute[outFields[1]], "bankAddres": feature.attributes[outFields[2]], "manager": feature.attributes[outFields[3]], "time": feature.attributes[outFields[4]] } });