I developed a webgis tool to find some features on map using Find task of ArcGIS javascript api and show the attribute in a grid using enhanced grid dojo.
Everything work fine at the first time and I can find features using keywords and show attributes in the grid but when I use the find tool again, I only can show the features on map and the grid not refresh after the first use.
How can I Refresh and show new values in the grid? The geonet has a code sample like my code . I search in the Stack Overflow and found the how-to-refresh-datagrid but I could not use the solutions.
define([
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"dgrid/Grid",
"dgrid/Selection",
'dojo/_base/declare',
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/_base/array",
"dijit/form/Button",
"dojo/parser",
"esri/symbols/SimpleMarkerSymbol","dojo/data/ItemFileReadStore","dojox/grid/EnhancedGrid","dojo/data/ItemFileWriteStore",
"dojox/grid/enhanced/plugins/Pagination","dojox/grid/enhanced/plugins/Selector","dojox/grid/enhanced/plugins/Filter","dojox/grid/enhanced/plugins/exporter/CSVWriter","dojo/io/iframe",
"dojo/domReady!"],function ( FindTask, FindParameters, SimpleLineSymbol, SimpleFillSymbol, Color,
Grid, Selection, declare, on, dom, registry, arrayUtils, Button, parser,SimpleMarkerSymbol,ItemFileReadStore,EnhancedGrid,ItemFileWriteStore) {
return{
Find: function (map) {
var findTask, findParams;
var grid, store;
parser.parse();
registry.byId("searchfind").on("click", doFind);
//Create Find Task using the URL of the map service to search
findTask = new FindTask("http://...:6080/arcgis/rest/services/layers2/MapServer/");
map.on("load", function () {
//Create the find parameters
findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["Name"];
findParams.outSpatialReference = map.spatialReference;
console.log("find sr: ", findParams.outSpatialReference);
});
function doFind() {
//Set the search text to the value in the box
var ownerNameBox = dom.byId("findName");
findParams.searchText = dom.byId("findName").value;
findTask.execute(findParams, showResults);
}
function showFilterBar(){
dijit.byId('grid').showFilterBar(true);
}
function showResults(results) {
//This function works with an array of FindResult that the task returns
map.graphics.clear();
var symbol = new SimpleMarkerSymbol();
symbol.setColor(new Color([0,255,255]));
//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;
});
var data = {
identifier: 'OBJECTID',
label:'OBJECID',
items: items
};
store = new dojo.data.ItemFileReadStore({data: data});
/*set up layout*/
var layout = [[
{'name': 'OBJECTID', 'field': 'OBJECTID', 'width':'9em',datatype:"number"},
{'name': 'Name', 'field': 'Name','width':'16em',datatype:"string",autocomplete:true},
{'name':'Address','field':'Address','width':'18em',datatype:"string",autocomplete:true}
]];
/*create a new grid:*/
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store:store,
structure: layout, rowSelector: '1px',
plugins: {
// pagination: {
// pageSizes: ["5", "10", "All"],
// description: true,
// sizeSwitch: false,
// pageStepper: true,
// gotoButton: true,
// /*page step to be displayed*/
// maxPageStep: 3,
// /*position of the pagination bar*/
// position: "bottom"
// },
filter: {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true
// Set the maximum rule count to 5
// ruleCount: 5,
// Set the name of the items
// itemsName: "songs",
}
}
},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("grid").appendChild(grid.domNode);
/*Call startup() to render the grid*/
grid.startup();
grid.setStore(store);
grid.refresh()
}
//Zoom to the parcel when the user clicks a row
//display the results in the grid
//Zoom back to the initial map extent
// map.centerAndZoom(center, zoom);
// //Zoom to the parcel when the user clicks a row
function onRowClickHandler(evt) {
var clickedTaxLotId = event.rows[0].data.BRTID;
var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.BRTID === clickedTaxLotId);
});
if ( selectedTaxLot.length ) {
map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
}
}
}
}
}
)
summary of body tag:
<body class="claro" role="main">
<div id="appLayout" style="width:100%; height:100%;" >
</div>
<!--<div id="rightpane">-->
<!--</div>-->
<div id="center">
<!-->
some divs
<!-->
</div>
