1

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>

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.