Clearing Data Store and Grid

DavidAshton · ‎05-10-2012

I'm using the example Show Find Task results in DataGrid
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/find_map_datagrid.html

I have it up and running but now I want to create a clear button, which I have, and have it clear the graphics and clear the data store and grid when the user clicks on the clear button (function clearQuery()). So I made the grid variable a global variable and my coding isn't working and i don't know why.

Can you take a look and let me know what is wrong. My graphics clear but my grid doesn't.

//this should allow the user to clear grid and store  function clearQuery() {  //clear my graphics    map.graphics.clear();          //create an empty store and then bind to grid     var emptyCells = { items: "" };   var emptyStore = new dojo.data.ItemFileWriteStore({data: emptyCells});    grid = dijit.byId('grid');   grid.setStore(emptyStore);       }

ShreyasVakil · ‎05-10-2012

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples       on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Display Find Task results in Dojo DataGrid</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/Grid.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/claroGrid.css">     <script type="text/javascript">       dojoConfig = {         parseOnLoad:true       }     </script>     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>      <script type="text/javascript">       dojo.require("esri.map");       dojo.require("dojox.grid.DataGrid");       dojo.require("dojo.data.ItemFileReadStore");       dojo.require("esri.tasks.find");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dijit.form.Button");                   var findTask, findParams;       var map, startExtent;       var grid, store, emptyStore;        function init() {         dojo.connect(grid, "onRowClick", onRowClickHandler);          //Create map and add the ArcGIS Online imagery layer         startExtent = new esri.geometry.Extent({"xmin":-9267533.641224435,"ymin":5225262.235659762,"xmax":-9243914.599484349,"ymax":5232026.912662991,"spatialReference":{"wkid":102100}});         map = new esri.Map("map", { extent: startExtent});                 var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");         map.addLayer(streetMapLayer);          //Create Find Task using the URL of the map service to search         findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");          //Create the find parameters         findParams = new esri.tasks.FindParameters();         findParams.returnGeometry = true;         findParams.layerIds = [0];         findParams.searchFields = ["OWNERNME1","OWNERNME2"];         findParams.outSpatialReference = map.spatialReference;                 dojo.connect(map, 'onLoad', function(theMap) {            //resize the map when the browser resizes            dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });       }        function doFind() {         //Set the search text to the value in the box         findParams.searchText = dojo.byId("ownerName").value;         findTask.execute(findParams,showResults);       }        function showResults(results) {         //This function works with an array of FindResult that the task returns         map.graphics.clear();         var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));          //create array of attributes         var items = dojo.map(results,function(result){           var graphic = result.feature;           graphic.setSymbol(symbol);           map.graphics.add(graphic);           return result.feature.attributes;         });                   //Create data object to be used in store         var data = {           identifier: "PARCELID",  //This field needs to have unique values           label: "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.           items: items         };           //Create data store and bind to grid.         store = new dojo.data.ItemFileReadStore({ data:data });          grid = dijit.byId('grid');         grid.setStore(store);          //Zoom back to the initial map extent         map.setExtent(startExtent);        }            function clearMyGrid()    {     map.graphics.clear();     var emptyCells = { items: "" };     var emptyStore = new dojo.data.ItemFileReadStore({data: emptyCells});     grid.setStore(emptyStore);    }                //Zoom to the parcel when the user clicks a row       function onRowClickHandler(evt){         var clickedTaxLotId = grid.getItem(evt.rowIndex).PARCELID;         var selectedTaxLot;          dojo.forEach(map.graphics.graphics,function(graphic){           if((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId){             selectedTaxLot = graphic;             return;           }         });         var taxLotExtent = selectedTaxLot.geometry.getExtent();         map.setExtent(taxLotExtent);       }        dojo.addOnLoad(init);     </script>   </head>   <body class="claro">   <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:40px;">       Owner name: <input type="text" id="ownerName" size="60" value="Katz" />       <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>         Search       </button>    <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ clearMyGrid();}, value:"Clear"'>         Clear       </button>     </div>     <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane" style="border:1px solid #000;"></div>     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">      <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">       <thead>         <tr>           <th field="PARCELID">Parcel ID</th>           <th field="OWNERNME1" >Owner 1</th>           <th field="OWNERNME2">Owner 2</th>           <th field="RESYRBLT ">Year Built</th>           <th field="SITEADDRESS" width="100%">Address</th>         </tr>       </thead>     </table>     </div>   </div>   </body> </html>

Please try and let me know!
Thanks!

View solution in original post

ShreyasVakil · ‎05-10-2012

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />     <!--The viewport meta tag is used to improve the presentation and behavior of the samples       on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>Display Find Task results in Dojo DataGrid</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/Grid.css">     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/claroGrid.css">     <script type="text/javascript">       dojoConfig = {         parseOnLoad:true       }     </script>     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>      <script type="text/javascript">       dojo.require("esri.map");       dojo.require("dojox.grid.DataGrid");       dojo.require("dojo.data.ItemFileReadStore");       dojo.require("esri.tasks.find");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dijit.form.Button");                   var findTask, findParams;       var map, startExtent;       var grid, store, emptyStore;        function init() {         dojo.connect(grid, "onRowClick", onRowClickHandler);          //Create map and add the ArcGIS Online imagery layer         startExtent = new esri.geometry.Extent({"xmin":-9267533.641224435,"ymin":5225262.235659762,"xmax":-9243914.599484349,"ymax":5232026.912662991,"spatialReference":{"wkid":102100}});         map = new esri.Map("map", { extent: startExtent});                 var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");         map.addLayer(streetMapLayer);          //Create Find Task using the URL of the map service to search         findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/TaxParcelQuery/MapServer/");          //Create the find parameters         findParams = new esri.tasks.FindParameters();         findParams.returnGeometry = true;         findParams.layerIds = [0];         findParams.searchFields = ["OWNERNME1","OWNERNME2"];         findParams.outSpatialReference = map.spatialReference;                 dojo.connect(map, 'onLoad', function(theMap) {            //resize the map when the browser resizes            dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });       }        function doFind() {         //Set the search text to the value in the box         findParams.searchText = dojo.byId("ownerName").value;         findTask.execute(findParams,showResults);       }        function showResults(results) {         //This function works with an array of FindResult that the task returns         map.graphics.clear();         var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98,194,204]), 2), new dojo.Color([98,194,204,0.5]));          //create array of attributes         var items = dojo.map(results,function(result){           var graphic = result.feature;           graphic.setSymbol(symbol);           map.graphics.add(graphic);           return result.feature.attributes;         });                   //Create data object to be used in store         var data = {           identifier: "PARCELID",  //This field needs to have unique values           label: "PARCELID", //Name field for display. Not pertinent to a grid but may be used elsewhere.           items: items         };           //Create data store and bind to grid.         store = new dojo.data.ItemFileReadStore({ data:data });          grid = dijit.byId('grid');         grid.setStore(store);          //Zoom back to the initial map extent         map.setExtent(startExtent);        }            function clearMyGrid()    {     map.graphics.clear();     var emptyCells = { items: "" };     var emptyStore = new dojo.data.ItemFileReadStore({data: emptyCells});     grid.setStore(emptyStore);    }                //Zoom to the parcel when the user clicks a row       function onRowClickHandler(evt){         var clickedTaxLotId = grid.getItem(evt.rowIndex).PARCELID;         var selectedTaxLot;          dojo.forEach(map.graphics.graphics,function(graphic){           if((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId){             selectedTaxLot = graphic;             return;           }         });         var taxLotExtent = selectedTaxLot.geometry.getExtent();         map.setExtent(taxLotExtent);       }        dojo.addOnLoad(init);     </script>   </head>   <body class="claro">   <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"  style="width:100%;height:100%;margin:0;">     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:40px;">       Owner name: <input type="text" id="ownerName" size="60" value="Katz" />       <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ doFind();}, value:"Search"'>         Search       </button>    <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ clearMyGrid();}, value:"Clear"'>         Clear       </button>     </div>     <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit.layout.ContentPane" style="border:1px solid #000;"></div>     <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:150px;">      <table data-dojo-type="dojox.grid.DataGrid" data-dojo-id="grid"  id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">       <thead>         <tr>           <th field="PARCELID">Parcel ID</th>           <th field="OWNERNME1" >Owner 1</th>           <th field="OWNERNME2">Owner 2</th>           <th field="RESYRBLT ">Year Built</th>           <th field="SITEADDRESS" width="100%">Address</th>         </tr>       </thead>     </table>     </div>   </div>   </body> </html>

Please try and let me know!
Thanks!

EmilyLaMunyon · ‎05-10-2012

I have been trying to get this to work for a while as well. When I try your code Shreyas I get a clearMyGrid is not defined in Firebug.

Any ideas?

Thanks!

JMcNeil · ‎05-10-2012

As svakil pionted out your code looks good except you had .ItemFileWriteStore

function clearQuery()
{
 //clear my graphics
   map.graphics.clear();
    
    //create an empty store and then bind to grid
    var emptyCells = { items: "" };
  var emptyStore = new dojo.data.ItemFileWriteStore({data: emptyCells});
   grid = dijit.byId('grid');
  grid.setStore(emptyStore);
    

}

When you need .ItemFileReadStore

   map.graphics.clear();
    var emptyCells = { items: "" };
    var emptyStore = new dojo.data.ItemFileReadStore({data: emptyCells});
    grid.setStore(emptyStore)

Another solution...a little hookie would be just hiding your grid

function clearQuery()
{
 //clear my graphics
   map.graphics.clear();
//Hide Grid
   esri.hide(dojo.byId("grid"));
   
}

Then next time a find/query is ran just start out by showing your grid

esri.show(dojo.byId("grid"));

and the example code overwrites the store data every time so your users won't know the difference.

Jay

ShreyasVakil · ‎05-11-2012

I have been trying to get this to work for a while as well. When I try your code Shreyas I get a clearMyGrid is not defined in Firebug.

Any ideas?

Thanks!

I copied the whole code and tested again. It is working perfect without throwing any errors.

make sure you have this function to clear the grid:

function clearMyGrid()
   {
    map.graphics.clear();
    var emptyCells = { items: "" };
    var emptyStore = new dojo.data.ItemFileReadStore({data: emptyCells});
    grid.setStore(emptyStore);
   }

and also this button in the body from where you call clearMyGrid:

 <button data-dojo-type="dijit.form.Button"  data-dojo-props='onClick:function(){ clearMyGrid();}, value:"Clear"'>
        Clear
      </button>