topic Re: Search and Default Editor in ArcGIS JavaScript Maps SDK Questions

Search and Default Editor

RickeyFight — Fri, 04 Dec 2015 16:36:56 GMT

I am getting a weird result when I search for a location.

I have the Editor widget and Search basic combined.

When I search for a location, I can zoom to it. Then when I click on any other point to edit it, I get this result:

Has anyone dealt with this?

i think I am looking for a way to clear search when I click anywhere not the search point.

Even when I clear the search bar I still cannot click on a point to edit:

Re: Search and Default Editor

RobertScheitlin__GISP — Fri, 04 Dec 2015 16:46:48 GMT

Rickey,

This is a known feature with the API and you have to re-initialize the editor widget to overwrite the changes to the popup made by the search widget. I have seen a couple of threads on this but I don't have the links off hand.

Re: Search and Default Editor

RickeyFight — Fri, 04 Dec 2015 16:53:51 GMT

Robert,

Thank you I will search harder for them

Re: Search and Default Editor

RickeyFight — Sat, 05 Dec 2015 00:05:22 GMT

I have searched for an example for a few hours and cannot find any.

Re: Search and Default Editor

RobertScheitlin__GISP — Sat, 05 Dec 2015 02:30:08 GMT

Here is the thread with the advice from Kelly:

Bug? Editor Widget & Search Widget not playing nice together

Re: Search and Default Editor

RobertScheitlin__GISP — Wed, 09 Dec 2015 13:56:35 GMT

Rickey,

Did the link I provided answer your question?

Re: Search and Default Editor

RickeyFight — Wed, 09 Dec 2015 15:22:29 GMT

Robert,

Sort of, I got the search to clear, but I cannot get the editor to reinitialize.

I am still working with the code.

Re: Search and Default Editor

RickeyFight — Sun, 12 Dec 2021 02:45:02 GMT

Robert,

I am getting hung up on the destroyEditor part.

            var search = new Search({
                map: map
            }, "search");

            search.startup();


            search.on("select-result", lang.hitch(this, function () {
                //if edit tool is enabled we'll have to delete/create
                //so info window behaves correctly.
                on.once(this.map.infoWindow, "hide", lang.hitch(this, function () {
                    search.clearGraphics();
                    console.log("Cleared Search Graphics");
              
                       _destroyEditor();
                        console.log("Test");
                       initEditing();

                           }));
            }));

             function _destroyEditor() {
                   if (this.editor) {
                        this.editor.destroy();
  console.log("Destroyed editor");
                        this.editor = null;    
                    }
                }


            function initEditing(event) {
                var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {
                    return {
                        "featureLayer": layer.layer,
                        "isEditable": true,
                        'showAttachments': true,
                        "showDeleteButton": false,
                        "fieldInfos": [{
                            'fieldName': 'Caller_Name',
                            'isEditable': false,
                            'tooltip': 'Caller Name',
                            'label': 'Caller Name:'
            }, {
                            'fieldName': 'Priority',
                            'isEditable': true,
                            'tooltip': 'Priority',
                            'label': 'Priority:'
            }, {
                            'fieldName': 'Location',
                            'isEditable': false,
                            'label': 'Location:'
            }, {
                            'fieldName': 'Phone',
                            'isEditable': false,
                            'label': 'Phone:'
            }, {
                            'fieldName': 'Notes',
                            'isEditable': true,
                            'label': 'Notes:'
            }, {
                            'fieldName': 'CallType',
                            'isEditable': true,
                            'label': 'CallType:'
            }]
                    };
                });


                var settings = {
                    map: map,
                    layerInfos: featureLayerInfos
                };
                var params = {
                    settings: settings
                };


                var editorWidget = new Editor(params, 'editorDiv');
                editorWidget.startup();


                //snapping defaults to Cmd key in Mac & Ctrl in PC.
                //specify "snapKey" option only if you want a different key combination for snapping
                map.enableSnapping();
            }

Re: Search and Default Editor

RobertScheitlin__GISP — Wed, 09 Dec 2015 16:04:21 GMT

Rickey,

You are creating a local var for your editor when you init your editor and the example Kelly is using creates a global var for the editor called this.editor

Re: Search and Default Editor

RickeyFight — Wed, 09 Dec 2015 16:21:16 GMT

Robert,

I mostly realize what is happening, I just am not 100% sure how to fix it.

What is happening now is that when the editor tries to reinitialize I get this error:

Uncaught TypeError: Cannot read property 'layers' of undefined

I realize that this:

   var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {

is a local variable but I am unsure how to make it global.

Re: Search and Default Editor

RobertScheitlin__GISP — Wed, 09 Dec 2015 16:31:45 GMT

Can you show me your code that calls initEditing initially?

Re: Search and Default Editor

RickeyFight — Sun, 12 Dec 2021 02:45:05 GMT

Robert,

     map.on("layers-add-result", initEditing);

            function initEditing(event) {
                var featureLayerInfos = arrayUtils.map(event.layers, function (layer) {
                    return {
                        "featureLayer": layer.layer,
                        "isEditable": true,
                        'showAttachments': true,
                        "showDeleteButton": false,
                        "fieldInfos": [{
                            'fieldName': 'Caller_Name',
                            'isEditable': false,
                            'tooltip': 'Caller Name',
                            'label': 'Caller Name:'
            }, {
                            'fieldName': 'Priority',
                            'isEditable': true,
                            'tooltip': 'Priority',
                            'label': 'Priority:'
            }, {
                            'fieldName': 'Location',
                            'isEditable': false,
                            'label': 'Location:'
            }, {
                            'fieldName': 'Phone',
                            'isEditable': false,
                            'label': 'Phone:'
            }, {
                            'fieldName': 'Notes',
                            'isEditable': true,
                            'label': 'Notes:'
            }, {
                            'fieldName': 'CallType',
                            'isEditable': true,
                            'label': 'CallType:'
            }]
                    };
                });


                var settings = {
                    map: map,
                    layerInfos: featureLayerInfos
                };
                var params = {
                    settings: settings
                };


              var editorWidget = new Editor(params, 'editorDiv');
                editorWidget.startup();


                //snapping defaults to Cmd key in Mac & Ctrl in PC.
                //specify "snapKey" option only if you want a different key combination for snapping
                map.enableSnapping();
            }

Re: Search and Default Editor

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:45:08 GMT

Rickey,

Here is my recommended code changes:

            map.on("layers-add-result", initEditing);

            function initEditing(event) {  
                window.featureLayerInfos = arrayUtils.map(event.layers, function (layer) {  
                    return {  
                        "featureLayer": layer.layer,  
                        "isEditable": true,  
                        'showAttachments': true,  
                        "showDeleteButton": false,  
                        "fieldInfos": [{  
                            'fieldName': 'Caller_Name',  
                            'isEditable': false,  
                            'tooltip': 'Caller Name',  
                            'label': 'Caller Name:'  
                        }, {  
                            'fieldName': 'Priority',  
                            'isEditable': true,  
                            'tooltip': 'Priority',  
                            'label': 'Priority:'  
                        }, {  
                            'fieldName': 'Location',  
                            'isEditable': false,  
                            'label': 'Location:'  
                        }, {  
                            'fieldName': 'Phone',  
                            'isEditable': false,  
                            'label': 'Phone:'  
                        }, {  
                            'fieldName': 'Notes',  
                            'isEditable': true,  
                            'label': 'Notes:'  
                        }, {  
                            'fieldName': 'CallType',  
                            'isEditable': true,  
                            'label': 'CallType:'  
                        }]  
                    };  
                });  

                var settings = {  
                    map: map,  
                    layerInfos: featureLayerInfos  
                };  
                var params = {  
                    settings: settings  
                };  

                window.editor = new Editor(params, 'editorDiv');  
                window.editor.startup();  

                //snapping defaults to Cmd key in Mac & Ctrl in PC.  
                //specify "snapKey" option only if you want a different key combination for snapping  
                map.enableSnapping();  
            }

            search.on("select-result", lang.hitch(this, function () {  
                //if edit tool is enabled we'll have to delete/create  
                //so info window behaves correctly.  
                on.once(this.map.infoWindow, "hide", lang.hitch(this, function () {  
                    search.clearGraphics();  
                    console.log("Cleared Search Graphics");  
                    _destroyEditor();  
                    console.log("Test");  
                    reActivateEditor();  
                }));  
            }));  
  
            function _destroyEditor() {  
                if (this.editor) {  
                    this.editor.destroy();
                    console.log("Destroyed editor");  
                    this.editor = null;      
                }  
            }

            function reActivateEditor() {
                var settings = {  
                    map: map,  
                    layerInfos: window.featureLayerInfos  
                };  
                var params = {  
                    settings: settings  
                };  
  
  
                window.editor = new Editor(params, 'editorDiv');  
                window.editor.startup();  
  
  
                //snapping defaults to Cmd key in Mac & Ctrl in PC.  
                //specify "snapKey" option only if you want a different key combination for snapping  
                map.enableSnapping();
            }

Re: Search and Default Editor

RickeyFight — Wed, 09 Dec 2015 19:24:51 GMT

Robert,

Thank you for your help so far! I have been able to get to what you posted (mostly) by myself. There are two errors that I cannot get by.

The first error occurs when I use the code you provide:

Uncaught TypeError: a.featureLayer.getEditCapabilities is not a function

The second, using the code I came up with to try to get around the layers issue:

Editor: please provide 'layerInfos' parameter in the constructor

esri.AttributeInspector: please provide correct parameter in the constructor

Uncaught TypeError: Cannot read property 'loaded' of undefined

I think this happens because I am trying to move the layerInfos outside of the function. If I keep layerInfos inside the function, I get the error:

Uncaught TypeError: Cannot read property 'layers' of undefined

Which I stated above

Re: Search and Default Editor

RobertScheitlin__GISP — Wed, 09 Dec 2015 19:35:17 GMT

Rickey,

I am going to need to see all your code to provide any further assistance.

Re: Search and Default Editor

RickeyFight — Wed, 09 Dec 2015 20:49:48 GMT

Robert,

Here is all the code:

Edit fiddle - JSFiddle

Thank you for taking time to look at this!

Re: Search and Default Editor

RobertScheitlin__GISP — Wed, 09 Dec 2015 21:29:02 GMT

Rickey,

You were just not keep your var names straight. You had window.editor in one function and window.editorWidget in another (and some other small tweaks).

Edit fiddle - JSFiddle

Re: Search and Default Editor

RickeyFight — Wed, 09 Dec 2015 21:46:29 GMT

Robert,

When I try it in jsfiddle, it works.

When I copy the script to my html and save to server, I get the same error as before. The popup will not display any data.

Uncaught TypeError: a.featureLayer.getEditCapabilities is not a function

Re: Search and Default Editor

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:45:12 GMT

Rickey,

This is what I have working fine on my dev machine:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Emergency Loc</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dojox/layout/resources/ExpandoPane.css">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
    }

    body {
      background-color: #fff;
      overflow: hidden;
      font-family: Helvetica, san-serif;
    }

    #templatePickerPane {
      width: 225px;
      overflow: hidden;
    }

    #Editor {
      heigh: 30%;
    }

    #panelHeader {
      background-color: #92A661;
      border-bottom: solid 1px #92A860;
      color: #FFF;
      font-size: 18px;
      height: 24px;
      line-height: 22px;
      margin: 0;
      overflow: hidden;
      padding: 10px 10px 10px 10px;
    }

    #map {
      margin-right: 5px;
      padding: 0;
    }

    .esriEditor .templatePicker {
      padding-bottom: 5px;
      padding-top: 5px;
      height: 500px;
      border-radius: 0px 0px 4px 4px;
      border: solid 1px #92A661;
    }

    .dj_ie .infowindow .window .top .right .user .content,
    .dj_ie .simpleInfoWindow .content {
      position: relative;
    }

    .dgrid {
      border: none;
      height: 100%;
    }

    .dgrid-column-0 {
      width: 35px;
    }

    .dgrid-row-odd {
      background: #FFFDF3;
    }

    td div img:hover {
      cursor: pointer;
    }

    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }

    #LocateButton {
      position: absolute;
      top: 130px;
      left: 20px;
      z-index: 50;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }

    th.dgrid-cell.dgrid-cell-padding.dgrid-column-2.field-Priority.dgrid-sortable {
      width: 20%;
    }

    td.dgrid-cell.dgrid-cell-padding.dgrid-column-2.field-Priority {
      width: 20%;
    }

    #layerListPane {
      width: 25%;
    }

    .esriLayer {
      background-color: #fff;
    }

    .esriLayerList .esriList {
      border-top: none;
    }

    .esriLayerList .esriTitle {
      background-color: #fff;
      border-bottom: none;
    }

    .esriLayerList .esriList ul {
      background-color: #fff;
    }
    /*css rules for the expand div*/

    .esriLayerExpand {
      width: 16px;
      height: 16px;
      float: left;
      margin: 12px 0;
    }

    .esriLayerExpand.expand {
      background-image: url(images/v_right.png);
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }

    .esriLayerExpand.collapse {
      background-image: url(images/v.png);
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
    }
    /*narrow the margin of the checkbox for aesthetics*/

    .esriLayerList .esriCheckbox {
      margin: 12px 5px 12px 5px;
    }
  </style>

  <script src="http://js.arcgis.com/3.15"></script>
  <script>
    var map, grid;

    require([
      "esri/config",
      "esri/map",
      "esri/SnappingManager",
      "esri/dijit/editing/Editor",
      "esri/layers/FeatureLayer",
      "esri/tasks/GeometryService",
      "esri/toolbars/draw",
      "dojo/keys",
      "dojo/parser", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/_base/declare", "dgrid/OnDemandGrid",
      "dgrid/Selection", "esri/symbols/SimpleFillSymbol", "esri/Color", "dijit/form/Button",
      "esri/symbols/SimpleMarkerSymbol", "dojo/_base/array", "dojo/dom-class",
      "dojo/i18n!esri/nls/jsapi",
      "esri/tasks/query",
      "dojo/store/Memory", "esri/geometry/Extent", "esri/layers/CodedValueDomain", "esri/layers/Domain",
      "esri/dijit/HomeButton", "esri/dijit/LocateButton",
      "esri/dijit/Search", "esri/dijit/Scalebar", "esri/dijit/LayerList", "dojo/dom-construct", "dojo/dom-style",
      "dojo/dom", "dojo/_base/lang", "dojo/on",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojox/layout/ExpandoPane", "dijit/layout/AccordionContainer",
      "dojo/domReady!"
    ], function (
      esriConfig, Map, SnappingManager, Editor, FeatureLayer, GeometryService,
      Draw, keys, parser, ArcGISDynamicMapServiceLayer, declare, Grid, Selection, SimpleFillSymbol, Color, Button, SimpleMarkerSymbol,
      arrayUtils, domClass, i18n, Query, Memory, Extent, CodedValueDomain,
      Domain, HomeButton, LocateButton, Search, Scalebar, LayerList, domConstruct, domStyle, dom, lang, on
    ) {
      parser.parse();

      //snapping is enabled for this sample - change the tooltip to reflect this
      i18n.toolbars.draw.start += "<br/>Press <b>CTRL</b> to enable snapping";
      i18n.toolbars.draw.addPoint += "<br/>Press <b>CTRL</b> to enable snapping";

      //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
      //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
      //for details on setting up a proxy page.
      esriConfig.defaults.io.proxyUrl = "/proxy/";

      //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
      esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      //var StatesGrid = declare([Grid, Selection]);
      //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
      esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      /*____________________________________________Dgrid________________________________________________________________*/
      var StatesGrid = declare([Grid, Selection]);

      var columns = [
        {
          label: "", //wasn't able to inject an HTML <div> with image here
          field: "OBJECTID",
          formatter: makeZoomButton
        }, {
          label: "Location",
          field: "Location"
        }, {
          label: "Priority",
          field: "Priority"

        }, {
          label: "Last Contact",
          field: "last_edited_date",
          formatter: formatlast_edited_date
        }
      ];

      grid = new StatesGrid({
        bufferRows: Infinity,
        columns: columns
      }, "grid");

      /*____________________________________________Map________________________________________________________________*/
      map = new Map("map", {
        basemap: "topo",
        center: [-122.710375, 42.197994],
        zoom: 16
      });
      /*____________________________________________Home________________________________________________________________*/
      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();
      /*____________________________________________Locate________________________________________________________________*/
      geoLocate = new LocateButton({
        map: map,
        setScale: false,
        useTracking: true,
        timeout: 15000,
        enableHighAccuracy: true
      }, "LocateButton");
      geoLocate.startup();
      /*____________________________________________Search________________________________________________________________*/
      var search = new Search({
        map: map
      }, "search");
      search.startup();

      map.on("layers-add-result", initEditing);
      /*____________________________________________Edit________________________________________________________________*/

      function initEditing(event) {
        featureLayerInfos = arrayUtils.map(event.layers, function (layer) {
          return {
            "featureLayer": layer.layer,
            "isEditable": true,
            'showAttachments': true,
            "showDeleteButton": false,
            "fieldInfos": [{
              'fieldName': 'Caller_Name',
              'isEditable': false,
              'tooltip': 'Caller Name',
              'label': 'Caller Name:'
            }, {
              'fieldName': 'Priority',
              'isEditable': true,
              'tooltip': 'Priority',
              'label': 'Priority:'
            }, {
              'fieldName': 'Location',
              'isEditable': false,
              'label': 'Location:'
            }, {
              'fieldName': 'Phone',
              'isEditable': false,
              'label': 'Phone:'
            }, {
              'fieldName': 'Notes',
              'isEditable': true,
              'label': 'Notes:'
            }, {
              'fieldName': 'CallType',
              'isEditable': true,
              'label': 'CallType:'
            }]
          };
        });

        var settings = {
          map: map,
          layerInfos: featureLayerInfos
        };
        var params = {
          settings: settings
        };

        editor = new Editor(params, 'editorDiv');
        editor.startup();

        //snapping defaults to Cmd key in Mac & Ctrl in PC.
        //specify "snapKey" option only if you want a different key combination for snapping
        map.enableSnapping();
      }

      search.on("select-result", lang.hitch(this, function () {
        console.log(search.value);
        //if edit tool is enabled we'll have to delete/create
        //so info window behaves correctly.
        on.once(this.map.infoWindow, "hide", lang.hitch(this, function () {
          search.clearGraphics();
          console.log("Cleared Search Graphics");
          _destroyEditor();
          console.log("Starting Editing Again");
          reActivateEditor();
          console.log("Complete");
        }))
      }))

      function _destroyEditor() {
        if (editor) {
          editor.destroy();
          console.log("Destroyed editor");
          editor = null;
        }
      }

      function reActivateEditor() {
        var settings = {
          map: map,
          layerInfos: featureLayerInfos
        };
        var params = {
          settings: settings
        };

        editor = new Editor(params, 'editorDiv');
        editor.startup();

        //snapping defaults to Cmd key in Mac & Ctrl in PC.
        //specify "snapKey" option only if you want a different key combination for snapping
        map.enableSnapping();
      }

      /*____________________________________________Scalebar________________________________________________________________*/
      var scalebar = new Scalebar({
        map: map,
        // "dual" displays both miles and kilmometers
        // "english" is the default, which displays miles
        // use "metric" for kilometers
        scalebarUnit: "english"
      });
      /*____________________________________________Script________________________________________________________________*/

      domClass.add(map.infoWindow.domNode, "light");

      var atlasLayer = new ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/pictometry3inch_jason/MapServer", {
        "id": "atlasLayer",
        "showAttribution": false
      });

      var recreationLayer = new ArcGISDynamicMapServiceLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer", {
        "id": "recreationLayer",
        "showAttribution": true,
        "refreshInterval": 0.038
      });

      var waterNetLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer", {
        "id": "waterNetworkLayer",
        "showAttribution": false
      })

      map.addLayers([atlasLayer, recreationLayer, waterNetLayer]);

      var llWidget = new LayerList({
        map: map,
        layers: [{
            layer: atlasLayer,
            id: "Ashland Photo",
            subLayers: false
         }, {
            layer: recreationLayer,
            id: "Emergency Locations",
            subLayers: true
         }, {
            layer: waterNetLayer,
            id: "Water Network layers",
            subLayers: true
         }],
        showOpacitySlider: true,
        showLegend: true
      }, "layerList");
      llWidget.startup();
      /*When the LayerList is loaded enhance it to add collapse capabilities*/
      llWidget.on('load', function () {
        enhanceLayerList();
      });

      /*Work with all the layers*/
      function enhanceLayer(layerNode) {
        layerExpand = domConstruct.create('div');
        domClass.add(layerExpand, 'esriLayerExpand collapse');
        domConstruct.place(layerExpand, layerNode, 'first');
        on(layerExpand, 'click', function (evt) {
          var LayerNodes = query('.esriLayer');
          var SubList = query('.esriSubList', evt.target.parentNode);
          if (domClass.contains(evt.target, 'collapse')) {
            domClass.replace(evt.target, 'expand', 'collapse');
            domStyle.set(SubList[0], 'display', 'none');
          } else {
            domClass.replace(evt.target, 'collapse', 'expand');
            domStyle.set(SubList[0], 'display', '');
          }
        });
        var subListNodes = query('.esriSubListLayer', layerNode);
        if (subListNodes.length > 0) {
          array.map(subListNodes, function (subListNode) {
            enhanceSubList(subListNode);
          });
        }
      }

      /*Now work with all the sublayers*/
      function enhanceSubList(subLayerNode) {
        var subLayerExpand;
        var subListNodes = query('.esriSubListLayer', subLayerNode);
        if (subListNodes.length > 0) {
          subLayerExpand = domConstruct.create('div');
          domClass.add(subLayerExpand, 'esriLayerExpand collapse');
          domConstruct.place(subLayerExpand, subLayerNode, 'first');
          on(subLayerExpand, 'click', function (evt) {
            var cState = '';
            var subListLayerNodes = query('.esriSubListLayer', evt.target.parentNode);
            if (domClass.contains(evt.target, 'collapse')) {
              domClass.replace(evt.target, 'expand', 'collapse');
              cState = 'collapse';
            } else {
              domClass.replace(evt.target, 'collapse', 'expand');
              cState = 'expand';
            }
            array.map(subListLayerNodes, function (subListLayerNode) {
              if (cState === 'collapse') {
                domStyle.set(subListLayerNode, 'display', 'none');
              } else {
                domStyle.set(subListLayerNode, 'display', 'block');
              }
            });
          });
        } else {
          subLayerExpand = domConstruct.create('div');
          domClass.add(subLayerExpand, 'esriLayerExpand');
          domConstruct.place(subLayerExpand, subLayerNode, 'first');
        }
      }

      /*Begin with the individual layers*/
      function enhanceLayerList() {
        var layerExpand, subLayerExpand;
        var LayerNodes = Query('.esriLayer');
        arrayUtils.map(LayerNodes, function (layerNode) {
          enhanceLayer(layerNode);
        });
      }
      /*____________________________________________AddLayers________________________________________________________________*/
      var operationsPointLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/FeatureServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["*"],
        refreshInterval: 0.038
      });

      map.addLayers([operationsPointLayer]);
      map.infoWindow.resize(400, 300);

      /*____________________________________________Dgrid________________________________________________________________*/

      //add the states demographic data
      var statesLayer = new FeatureLayer("http://gis.ashland.or.us/arcgis/rest/services/sandbox/EmerLoc/MapServer/0", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"]
      });

      //create Selection Symbol
      var highlightSymbol = new SimpleMarkerSymbol({
        "color": [0, 112, 255, 255],
        "size": 10,
        "angle": 0,
        "xoffset": 0,
        "yoffset": 14,
        "type": "esriSMS",
        "style": "esriSMSDiamond"
      });

      statesLayer.on("load", function (evt) {
        var query = new Query();
        query.where = "1=1";
        statesLayer.refreshInterval = 0.03;
        query.outFields = ["OBJECTID", "Priority", "Location", "last_edited_date", "CallType"];
        query.returnGeometry = true;

        statesLayer.queryFeatures(query, function (featureSet) {
          var items = arrayUtils.map(featureSet.features, function (feature) {
            var fields = statesLayer.fields;
            return feature.attributes;
          });

          //idProperty must be set manually if value is something other than 'id'
          var memStore = new Memory({
            data: items,
            idProperty: "OBJECTID"
          });
          window.grid.set("store", memStore);
          window.grid.set("sort", "last_edited_date", " descending: false");


          grid.on(".field-OBJECTID:click", function (e) {
            //retrieve the ObjectId when someone clicks on the magnifying glass
            if (e.target.alt) {
              zoomRow(e.target.alt);
            }
          });
        }, function (error) {
          console.info(error);
        });
        statesLayer.clearSelection();
      });

      map.addLayer(statesLayer);
      statesLayer.setRefreshInterval(0.083);

      map.on("click", function (evt) {
        grid.clearSelection();
      });

      function makeZoomButton(id) {
        //set the feature 'id' as the alt value for the image so that it can be used to query below
        var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'";
        zBtn = zBtn + " width='15' height='15'></div>";
        return zBtn;
      }

      //center at the selected feature on the map from the row in the data grid
      function zoomRow(id) {
        statesLayer.clearSelection();
        grid.refresh();
        var query = new Query();
        query.objectIds = [id];
        console.info(id);
        statesLayer.selectFeatures(query, FeatureLayer.SELECTION_SUBTRACT, function (features) {
          //re-centre map to zoom to the selected feature
          if (features.length) {
            // re-center the map to the selected feature
            map.centerAt(features[0].geometry, 0.9);
          } else {
            console.log("Feature Layer query returned no features... ", features);
          }
        });
        statesLayer.clearSelection();
      }

      function formatlast_edited_date(value) {
        var inputDate = new Date(value);
        return dojo.date.locale.format(inputDate, {
          selector: 'date',
          datePattern: 'MM/dd/yyyy HH:mm'
        });
      }
    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="search"></div>
      <div id="HomeButton"></div>
      <div id="LocateButton"></div>
    </div>
    <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="duration:300, title:'Layer List', splitter:true, region:'right', maxWidth:'220px', startExpanded:false, easeIn:'easing.linear', easeOut:'easing.linear'" style="width:22%;">
      <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
        <div id="layerList"></div>
      </div>
    </div>
    <div data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="duration:300, title:'Calls', splitter:true, region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'" style="width:22%;">
      <div data-dojo-type="dijit/layout/ContentPane" id="templatePickerPane" data-dojo-props="region:'left', maxWidth:'220px'" style="width:30%;">
        <!--<div id="Editor" >
      <div id="panelHeader" style="height:20%;">
        Default Editor
      </div>-->
        <div id="grid" style="height:75%;"></div>
      </div>
    </div>
  </div>
</body>

</html>

Re: Search and Default Editor

RickeyFight — Wed, 09 Dec 2015 23:01:45 GMT

Robert,

Here is your code on my server.

Emergency Loc

Does it work for you?

Thank you!