I developed a webgis find tool using ArcGIS javascript api 3.17. users search a keyword and find points on map. the find tool result show in an enhanced datagrid and works correctly. What i want to do is select a record in enhanced datagrid and zoom to selected record on map. I used "OnStartselect" event to fire the function "onRowClickHandler" but when i click to a record an error rised in the function. What's wrong in the function ?
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{
TehranFind: function (map) {
var findTask, findParams;
var grid, store;
/*set up layout*/
var layout = [[
{'name':'GUID','field':'GUID','width':'18em',datatype:"string",autocomplete:true},
{'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:*/
grid = new EnhancedGrid({
id: 'grid',
structure: layout, rowSelector: '1px',
clientSort: true,
rowSelector: '20px',
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",
},
selector:true
}
},
document.createElement('div'));
grid.on("OnStartselect", onRowClickHandler);
/*append the new grid to the div*/
dojo.byId("grid").appendChild(grid.domNode);
dojo.connect(grid, "onEndSelect", onRowClickHandler)
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,1,2,3,4];
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: 'GUID',
label:'GUID',
items: items
};
store = new dojo.data.ItemFileWriteStore({data: data});
/*Call startup() to render the grid*/
grid.startup();
grid.setStore(store);
}
//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() {
rowData = grid.getItem(0);
var clickedTaxLotId = rowData.GUID;
var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) {
return ((graphic.attributes) && graphic.attributes.GUID === clickedTaxLotId);
map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
});
if ( selectedTaxLot.length ) {
map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);
}
}
}
}
}
)
<body class="claro" role="main">
<div id="appLayout" style="width:100%; height:100%;" >
</div>
<!--<div id="rightpane">-->
<!--</div>-->
<div id="content">
<div id="center">
<div id="map" style="background-color:#F7F3E7;width:100%;height:100% ">
</div>
<div splitter="true" id="left" >
<div id="tab1">
<div id="contenttab1">
<div id="tocDiv"> </div>
</div>
<div dojoType="dijit.layout.AccordionContainer" title="ّFind" style="width:275px;" attachParent="true">
</div>
<div dojoType="dijit.layout.ContentPane" title="Findc ">
Owner name: <input type="text" id="findName" size="10" value="search" style="position: absolute;left:10px" />
<button id="searchfind" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" style="position: absolute;right: 40px;" > </button>
</div>
</div>
</div>
</div>
</div>
<div id="bottom" style="height: 200px" >
<div id="grid" style="height:98%;font-size: 14px" ></div>
</div>
</body>
</html>
