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 ?


    "dojo/domReady!"],function ( FindTask, FindParameters, SimpleLineSymbol, SimpleFillSymbol, Color,
                                Grid, Selection, declare, on, dom, registry, arrayUtils, Button, parser,SimpleMarkerSymbol,ItemFileReadStore,EnhancedGrid,ItemFileWriteStore) {

            TehranFind: function (map) {

                var findTask, findParams;

                var grid, store;

                /*set up layout*/
                var layout = [[
                    {'name': 'OBJECTID', 'field': 'OBJECTID', 'width':'9em',datatype:"number"},
                    {'name': 'Name', 'field': 'Name','width':'16em',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",




                grid.on("OnStartselect", onRowClickHandler);
                /*append the new grid to the div*/

                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(){

                function showResults(results) {

                    //This function works with an array of FindResult that the task returns
                    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;
                        return result.feature.attributes;
                    var data = {
                        identifier: 'GUID',
                        items: items

                     store = new dojo.data.ItemFileWriteStore({data: data});

                    /*Call startup() to render the grid*/


                //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 id="rightpane">-->


<div id="content">
    <div id="center">

        <div id="map" style="background-color:#F7F3E7;width:100%;height:100% ">

    <div  splitter="true"  id="left"    >
        <div id="tab1">

        <div id="contenttab1">
        <div id="tocDiv"> </div>
                    <div dojoType="dijit.layout.AccordionContainer" title="ّFind" style="width:275px;" attachParent="true">


                            <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 id="bottom" style="height: 200px" >

    <div id="grid" style="height:98%;font-size: 14px" ></div>



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.