Using the sandbox I have been trying to combine several things together to get something I think many people have been searching for an example of. My goal here with some help is to bring it all together in one sample. So what I am trying to do is take what I have and fix these three issues:1.) Show Query results on the map. (graphics)2.) Fix Zoom button which is the first column in the datagrid. Main reason this is probably not working is that I switched from a polygon layer to a points layer since that is what I think most people will filter by.3.) Filter my results using the Filter Blocks button.I'm purposely using the Census block layer so that when we get this right everyone will have a great working example of how to do this. Please take a look at the code below. I think I have the main pieces in place but just need some help with getting it to work. I've been throwing the code in the arcgis sandbox for testing. http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=map_create Any help would be greatly appreciated. I've spent two days trying to figure this out and messing around with a ton of examples. <!DOCTYPE html> <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>Add zoom button to DataGrid</title> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style> body,html,#main{margin:0;padding:0;height:100%;width:100%;} #map{padding:0;border:solid 1px;} </style> <script>var dojoConfig = { parseOnLoad:true };</script> <script src="http://js.arcgis.com/3.9/"></script> <script> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); dojo.require("dojo.parser"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.TextBox"); dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); var map, statesLayer; function init() { map = new esri.Map("map",{ basemap: "gray", center: [-97.031, 42.618], zoom: 4 }); //add the states demographic data statesLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0",{ mode:esri.layers.FeatureLayer.MODE_SELECTION, outFields:["ObjectID","STATE_FIPS","CNTY_FIPS", "POP2000"] }); //define a selection symbol var highlightSymbol = new esri.symbol.SimpleFillSymbol().setColor( new dojo.Color([50,205,50,.25])); statesLayer.setSelectionSymbol(highlightSymbol); dojo.connect(statesLayer,'onLoad',function(layer){ var query = new esri.tasks.Query(); query.where = "CNTY_FIPS = '045'"; layer.queryFeatures(query,function(featureSet){ var items = dojo.map(featureSet.features,function(feature){ return feature.attributes; }); var data = { identifier:"ObjectID", items:items}; store = new dojo.data.ItemFileReadStore({data:data}); grid.setStore(store); grid.setSortIndex(1,"true"); //sort on the state name }); }); map.addLayers([statesLayer]); //modify the grid so only the STATE_NAME field is sortable grid.canSort = function(col){ if(Math.abs(col) == 2) { return true; } else { return false; } }; } function makeZoomButton(id){ var zBtn = "<div data-dojo-type='dijit.form.Button'><img src='images/zoom.png'"; zBtn = zBtn + " width='18' height='18'"; zBtn = zBtn + " onClick=\"zoomRow('"+id+"')\"></div>"; return zBtn; } function zoomRow(id){ statesLayer.clearSelection(); var query = new esri.tasks.Query(); query.objectIds = [id]; statesLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features){ //zoom to the selected feature var stateExtent = features[0].geometry.getExtent().expand(5.0); map.setExtent(stateExtent); }); } function search() { var StateName = document.getElementById("County_filter").value; var Population = document.getElementById("POP_filter").value; document.getElementById('FilterHeader').innerHTML ="<u>Your request </u> <br> State:" +StateName + " Population:(" +Population+ ")" ; // var query = new esri.tasks.Query(); // query.where = "STATE_NAME <> '" + StateName + "'"; // queryTask.execute(query, showResults); } dojo.ready(init); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" > </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:255px"> <table data-dojo-type="dojox.grid.DataGrid" jsid="grid" id="grid" selectionMode="none"> <thead> <tr> <th field="ObjectID" formatter="makeZoomButton" width="25px"> <img alt="+" src="images/zoom.png"/> </th> <th field="STATE_FIPS" width="50px">State</th> <th field="CNTY_FIPS" width="60px">County</th> <th field="POP2000" width="60px">Pop</th> </tr> </thead> </table> </div> </div> <span id="Filter" style="position:fixed; left:20px; z-index:1; height:300px; bottom:50px; background-color:#FFFFFF; border:2px solid #666666; border-radius:6px; font-size:18px; padding:5px"> <br> <p style="margin-top:-25px; text-indent:10px; font-size:12px"> <select id='County_filter'><option value=''''>Choose County</option><option value='001'>County 001</option><option value='021'>County 021</option></select></p> <p style="margin-top:-10px; text-indent:10px; font-size:12px"><select id='POP_filter'><option value=''''>Population?</option><option value='<100'><100</option><option value='<300'><300</option></select> <!---<p style="margin-top:-7px; font-size:12px"><a href="javascript:{}" id="applyFilter">Apply filter</a>---> <br> <button dojoType="dijit.form.Button" onClick="search();">Filter Blocks</button> <p id="FilterHeader" style="margin-top:2px">Your request:</p> </span> </body> </html>
