AnsweredAssumed Answered

Creating a multi filter sample that everyone can use.

Question asked by deleted-user-yA_w_FC9FKe5 on Apr 24, 2014
Latest reply on Apr 28, 2014 by deleted-user-yA_w_FC9FKe5
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>

Outcomes