Creating a multi filter sample that everyone can use.

deleted-user-yA_w_FC9FKe5 — Thu, 24 Apr 2014 16:49:13 GMT

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>

Re: Creating a multi filter sample that everyone can use.

deleted-user-yA_w_FC9FKe5 — Fri, 25 Apr 2014 11:50:41 GMT

Just thought I would take this back to the top in case someone might be able to help with this.

Re: Creating a multi filter sample that everyone can use.

TimWitt — Fri, 25 Apr 2014 11:59:16 GMT

Hey Michael,

I think you could take a lot of information from this example (i.e. click on a datagrid to zoom, assign a graphic to the result).

I would also suggest to write it in AMD, since with the release of dojo 2.0 you would have to re-write your whole application.

Hope this is at least a little bit helpful!

Tim

Re: Creating a multi filter sample that everyone can use.

deleted-user-yA_w_FC9FKe5 — Fri, 25 Apr 2014 15:49:41 GMT

Hey Tim thanks for the reply. What is AMD?

I've been looking at that example along with the other quite a bit. I just went back to that example and tried to get it to do the things I need.

I'm struggling with the search piece of it though. It works great if I am using the .searchText but what I really want to do is be able to search for results using multiple filters.

Currently this works:
        function doFind() {
         alert("doFind ");
         findParams.searchText = dom.byId("txtStoreName").value;
          findTask.execute(findParams, showResults);
        }

However I am going to need to be able to filter on multiple filters. Something like this.
"STOREID = '" + dom.byId("txtStoreName").value + "' AND CLUSTER = "+ dom.byId("txtCluster").value + "';

I tried this but it does not seem to like it
        function doFind() {
           alert("doFind ");
         findParams.layerDefinitions[1] = "STOREID = '" + dom.byId("txtStoreName").value + "' AND CLUSTER = "+ dom.byId("txtCluster").value + "';
          findTask.execute(findParams, showResults);
        }

Re: Creating a multi filter sample that everyone can use.

TimWitt — Fri, 25 Apr 2014 15:59:01 GMT

This should help you understand AMD. Once dojo 2.0 hits, legacy will go away.

Re: Creating a multi filter sample that everyone can use.

deleted-user-yA_w_FC9FKe5 — Fri, 25 Apr 2014 16:08:51 GMT

Any idea what I need to do with my code to get it to filter?

Re: Creating a multi filter sample that everyone can use.

TimWitt — Fri, 25 Apr 2014 16:13:45 GMT

I don't know, sorry.

Re: Creating a multi filter sample that everyone can use.

deleted-user-yA_w_FC9FKe5 — Fri, 25 Apr 2014 16:32:27 GMT

No worries. Just another dead end in a day of frustrating dead ends. TGIF!!!

Re: Creating a multi filter sample that everyone can use.

TimWitt — Fri, 25 Apr 2014 16:33:43 GMT

I noticed, sometimes the weekend helps to empty out your head and the answers come on Monday 😉

Re: Creating a multi filter sample that everyone can use.

deleted-user-yA_w_FC9FKe5 — Mon, 28 Apr 2014 12:24:51 GMT

hmm seems as thought the weekend hasn't helped so far but I am far more relaxed.

topic Re: Creating a multi filter sample that everyone can use. in ArcGIS JavaScript Maps SDK Questions

Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.

Re: Creating a multi filter sample that everyone can use.