Start/Stop Editor Widget

Donald_EricPimpler · ‎06-09-2011

I need to be able to start and stop the Editor widget as necessary in my application. I see where I can use Editor.startup() to start the widget. Is there a method that I can use to "stop()" or disable the widget temporarily and then startup() again later? The documentation doesn't show the "startup()" method from what I can tell. I just found it in a sample. Not sure if there is a complementary "stop()" or "disable()".

derekswingley1 · ‎06-10-2011

Hi Eric,

The startup() method is part of the dijit lifecycle (more info on dojo dijits and widget)and there's not an analogous "stop" or "disable".

Can you talk a bit more about what you want to do? What about hiding/showing your editor at the appropriate times?

DanielNieto_Jr · ‎09-08-2011

I am looking to do the same thing and not having very much luck. Basically I have a button to press if one wishes to edit the map. When this button is pressed I disable my identify onClickListener and show/start up the editing widget. All this works fine, however I have not found a way to hide/disable the editing widgets onClickListener, so after a user presses the hide editing button, every click on the map runs both identify, and trys to pop up the editing info window causing the page to freeze. I have tried using .deactivate and .activate but neither of these seem to work, here is my toggle code.

function toggleEditing() {

    if (inEditing) {
        $("#toolBar").hide("fast");
        //HERE IS WHERE I TRIED editWidget.deactivate();
        onClickListener = dojo.connect(map, "onClick", clickIdentify);
        inEditing = false;
    } else {
     dojo.disconnect(onClickListener);
        //Here is where i would need to reactivate editing mode
        $("#toolBar").show("fast");
        inEditing = true;
    }
}

KellyHutchins · ‎09-08-2011

Here's a quick code snippet that shows creating/destroying the editor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <title>
      Default Editor
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">
      dojoConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4">
    </script>
    <style type="text/css">
      html,body {
        height:100%;
        width:100%;
        margin:0;
      }

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

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

      #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;
      }

    </style>

    <script type="text/javascript">
      dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");

      var map, resizeTimer;
      var editorWidget;
      var editLayers;

      function init() {

        esri.config.defaults.io.proxyUrl = "../proxy/proxy.ashx";
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        var extent = new esri.geometry.Extent({
          "xmin": -8576501,
          "ymin": 4705377,
          "xmax": -8574612,
          "ymax": 4706867,
          "spatialReference": {
            "wkid": 3857
          }
        });
    
        map = new esri.Map("map", {
          extent: extent
        });

        dojo.connect(map, "onLoad", function() {
          dojo.connect(dijit.byId('map'), 'resize', function() {
            resizeMap();
          });
        });

        dojo.connect(map, "onLayersAddResult", getEditableLayers);

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");

        map.addLayer(basemap);


        var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });

        var operationsLineLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/1", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });

        var operationsPolygonLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"]
        });


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



      function getEditableLayers(results) {

        editLayers = dojo.map(results, function(result) {
          return {
            'featureLayer': result.layer
          };
        });

      }
    //Functions to create and destroy the editor. We do this each time the edit button is clicked. 
     function createEditor() {

       if (editorWidget) {
         return;
       }
       if (editLayers.length > 0) {
         //create template picker 
         var templateLayers = dojo.map(editLayers, function (layer) {
           return layer.featureLayer;
         });

         var eDiv = dojo.create("div", {
           id: "editDiv"
         });
         dojo.byId('templatePickerPane').appendChild(eDiv);
         var editLayerInfo = editLayers;
         var templatePicker = new esri.dijit.editing.TemplatePicker({
           featureLayers: templateLayers,
           rows: 'auto',
           columns: 'auto',
           style: 'height:98%;width:98%;'
         }, 'editDiv');
         templatePicker.startup();

         var settings = {
           map: map,
           templatePicker: templatePicker,
           layerInfos: editLayerInfo,
           toolbarVisible: false
         };
         var params = {
           settings: settings
         };
         editorWidget = new esri.dijit.editing.Editor(params);
         editorWidget.startup();
       }

     }
     function destroyEditor() {
       if (editorWidget) {
         editorWidget.destroy();
         editorWidget = null;
       }

     }

      //Handle resize of browser
      function resizeMap() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          map.resize();
          map.reposition();
        }, 500);
      }

      dojo.addOnLoad(init);

    </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>
      <div data-dojo-type="dijit.layout.ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">
        <input type="button" onclick="createEditor();" value="Create Editor"/>
        <input type="button" onclick="destroyEditor();" value="Destroy Editor"/>
      </div>
    </div>
  </body>
</html>

JimWharton · ‎12-03-2013

Looks like after it gets destroyed once, there's no bringing it back.

Is there any way to turn it on and off?

-nobleach

JianHuang · ‎12-03-2013

Recreating it brings it back.

editorWidget = new esri.dijit.editing.Editor(params);
editorWidget.startup();

JimWharton · ‎12-04-2013

Interesting. When I recreate the editor, the template picker never returns. I have tried destroying and recreating it too. Once the editor is destroyed, the template picker goes with it.

GaneshSolai_Sambandam · ‎12-09-2013

Hi Guys
I think the code I have copied below, would work in Firefox and chrome, except in IE. I don't know why it isn't working in Internet Explorer. Template and editor widget gets updated once you change a layer from drop down menu in FF and chrome, but not in IE. Other than that, the code is working fine. Can anyone fix this to work in IE.

[HTML]<html lang="en">
   <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>Editable Points of Interest and Evacuation Map for Sheep Fire</title>

     
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
     <style type="text/css">
       .dj_ie .infowindow .window .top .right .user .content { position: relative; }
       .dj_ie .simpleInfoWindow .content {position: relative;}
     </style>
     <style>
       html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; }
       #leftPane{
         overflow:hidden;
         width:250px;
         border:none;
       }
       #map{
         padding:0;
       }
       #header{
         font-weight:600;
         font-size:14pt;
         color:#666666;
         padding-left:20px;
       }
     </style>

     
     <script type="text/javascript">
         djConfig = {
             parseOnLoad: true
         };
     </script>

     
     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
     <script type="text/javascript">
         //require selection dijit
         dojo.require("esri.map");
         dojo.require("esri.dijit.editing.Editor-all");
         dojo.require("dijit.layout.ContentPane");
         dojo.require("dijit.layout.BorderContainer");

         var map;
         var resizeTimer;
         var firePerimeter;
         var evacuationPerimeter;
         var pointsOfInterest;
         var fLayer, edLayer;
         var templatePicker, myEditor;
         var editLayers;
         var editorWidget;

         function init() {
             //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.
             esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";

             //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
             esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");

             var initialExtent = new esri.geometry.Extent({ "xmin": -117.66, "ymin": 34.19, "xmax": -117.41, "ymax": 34.37, "spatialReference": { "wkid": 4326 } });
             map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: false, nav: true });

             dojo.connect(map, "onLoad", function () {
                 dojo.connect(dijit.byId('map'), 'resize', function () {
                     resizeMap();
                 });
             });

             dojo.connect(map, "onLayersAddResult", initEditor);

             var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
             map.addLayer(basemap);

              pointsOfInterest = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0", {
                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                 outFields: ['*']
             });

              evacuationPerimeter = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/1", {
                  mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                  outFields: ['*']
              });

             firePerimeter = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/2", {
                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                 outFields: ['*']
             });

           // map.addLayers([pointsOfInterest, evacuationPerimeter]);
         }

         function fireEd() {

             //alert("fireEd");
             //map.removeAllLayers();
             if (fLayer) {
                 map.removeLayer(fLayer);
             }
             //dojo.connect(map, "onLayersAddResult", initEditor);
             var myLyrList = document.getElementById("myList");
             edLayer = myLyrList.options[myList.selectedIndex].text;
             //alert(myLyrList.options[myList.selectedIndex].value);
             switch (myLyrList.options[myList.selectedIndex].value) {
                 case "0":
                     fLayer = pointsOfInterest;
                     break;
                 case "1":
                     fLayer = evacuationPerimeter;
                     break;
                 case "2":
                     fLayer = firePerimeter;
                     break;
             }


             map.addLayers([fLayer]);

         }

         function initEditor(results) {

             editLayers = dojo.map(results, function (result) {
                 return {
                     'featureLayer': result.layer
                 };
             });
             createEditor();
         }
         //Functions to create and destroy the editor. We do this each time the edit button is clicked.
         function createEditor() {

             if (editorWidget) {
                 editorWidget.destroy();
                 editorWidget = null;
                // return;
             }
             if (editLayers.length > 0) {
                 //create template picker
                 var templateLayers = dojo.map(editLayers, function (layer) {
                     return layer.featureLayer;
                 });

                 var eDiv = dojo.create("div", {
                     id: "templDiv"
                 });
                 dojo.byId('leftPane').appendChild(eDiv);
                 var editLayerInfo = editLayers;
                 var templatePicker = new esri.dijit.editing.TemplatePicker({
                     featureLayers: templateLayers,
                     rows: 'auto',
                     columns: 'auto',
                   // style: 'height:98%;width:98%;'
                 }, 'templDiv');
                 templatePicker.startup();

                 var settings = {
                     map: map,
                     templatePicker: templatePicker,
                     layerInfos: editLayerInfo,
                     toolbarVisible: true
                 };
                 var params = {
                     settings: settings
                 };
                 var eDiv1 = dojo.create("div", {
                     id: "editDiv"
                 });
                 dojo.byId('leftPane').appendChild(eDiv1);
                 editorWidget = new esri.dijit.editing.Editor(params, "editDiv");
                 editorWidget.startup();
             }

         }
         function destroyEditor() {
             if (editorWidget) {
                 editorWidget.destroy();
                 editorWidget = null;
             }

         }



         //Handle resize of browser
         function resizeMap() {
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(function () {
                 map.resize();
                 map.reposition();
             }, 500);
         }
         dojo.addOnLoad(init);
     </script>
   </head>
   <body class="claro">
     <div dojotype="dijit.layout.BorderContainer" design="headline" style="width:100%;height:100%;">
       <div dojotype="dijit.layout.ContentPane" id="header" region="top">Editable Fire Map</div>
       <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div>
       <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left">

            <select id="myList" onchange="fireEd()">
     <option value="">Choose layer to edit</option>
           <option value="0">Points of Interest</option>
                 <option value="1">Evacuation Perimeter</option>
                <option value="2">Fire Perimeter</option>
        </select><br><br>

            <input type="button" onclick="createEditor();" value="Create Editor" disabled/>
        <input type="button" onclick="destroyEditor();" value="Destroy Editor"disabled/>

         <div id="templateDiv"></div>
         <div id="editorDiv"></div>
       </div>
     </div>
   </body>
</html>[/HTML]

KellyHutchins · ‎12-09-2013

Trailing commas can cause problems in some versions of IE. In your app you have a trailing comma in the template picker code. Try removing the comma after setting the columns and see if that resolves the IE issues.


           dojo.byId('leftPane').appendChild(eDiv);
                 var editLayerInfo = editLayers;
                 var templatePicker = new esri.dijit.editing.TemplatePicker({
                     featureLayers: templateLayers,
                     rows: 'auto',
                     columns: 'auto',     //REMOVE THIS COMMA
                   //  style: 'height:98%;width:98%;'
                 }, 'templDiv');
                 templatePicker.startup();

Anonymous User · ‎04-24-2014

This code is failing for me:

if (editorWidget) {
                 editorWidget.destroy();
                 editorWidget = null;
                // return;
             }

In the console log, if I print 'editorWidget' at the end of the 'create' function I get an array. However, when I click my button to destroy the editor, the console log says 'editorWidget' is not defined. Any thoughts on why the editor widget object name isn't persisting outside of the 'create' button click?

Create function:

var thing1 = on(startEdit, "click", function createEditor() {
  // TODO: If an editor is already there, kill it or they stack up 
  //Editor parameters
  var featureLayerInfos = [{
   'featureLayer' : operationsPointLayer
  }];
  var settings = {
   map : map,
   createOptions : {
    polygonDrawTools : [esri.dijit.editing.Editor.CREATE_TOOL_RECTANGLE]
   },
   // Try referencing just the CDB layer, is this what layerInfos needs?
   layerInfos : featureLayerInfos
  };
  var params = {
   settings : settings
  };
  // Dynamic Div for editor
  eDiv1 = domConstruct.create("div", {
   id : "editDivDyn"
  });
  domConstruct.place(eDiv1, "editPane_pane", "first");
  dom.byId("editMessage").innerHTML = "Click 'Stop Edit' in the toolbar when you are done.";
  // Create editor widget and place in dynamic Div
  var editorWidget = new Editor(params, 'editDivDyn');
  editorWidget.startup();
  console.log(editorWidget); // array exists
 });

Destroy:

var thing2 = on(stopEdit, "click", function destroyEditor() {
  console.log(editorWidget); // undefined
 });