nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Clearing Data Store and Grid

DavidAshton

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);       }

Finde mehr Beiträge mit dem Tag

Accepted answers

ShreyasVakil

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!

All comments

ShreyasVakil

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>

JMcNeil

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

EmilyLaMunyon

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!

ShreyasVakil

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!

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.