problems disabling navigation during edits when using infoTemplate

[TracySchloss]

I know there are many threads on editing and navigation, but I still can't figure it out.  I want to be able to enable/disable editing on my featureLayer.

I have a boolean set as app.editEnabled.

I have the button constructed as a toggleButton:

      createEditButton: function (){

          var tglButton = new ToggleButton({

           showLabel: true,

           label: 'Begin Editing',

            onChange: function(val) {        

            if (val){

                this.set('label', 'Stop Editing');

                app.editEnabled = true;    

            }else{

                this.set('label', 'Begin Editing');

                app.editEnabled = false;

            }

           }

        }, "tglEditButton");

      },

It is properly changing my Boolean and my button label.

      var template = new PopupTemplate({        title: null      });

        template.setContent(setPopupContent);

My FeatureLayer is defined as

    featureLayer =  new FeatureLayer(pathName+"/arcgis/rest/services/MDA/sampleGeocodeEdit/FeatureServer/0",{

        id:"featureLayer",

        outFields:['*'],

     infoTemplate:template

     });

//symbology defined elsewhere

     featureLayer.renderer = renderer;

     featureLayer.setSelectionSymbol(highlightMarkerSymbol);

I have a listener on it:

     on(featureLayer, "click", function(evt){

       map.infoWindow.hide();

       formatString = "";

       objectId = evt.graphic.attributes[featureLayer.objectIdField];

       selectQuery.objectIds = [objectId];

       featureLayer.selectFeatures(selectQuery);

         if (app.editEnabled) {

           myEditor.activateToolbar(evt.graphic,map);

         }

     });

in myEditor

     activateToolbar: function (graphic,map) {

       map.infoWindow.hide();

         map.disableMapNavigation();

          map.disablePan();

         app.editToolbar.activate(Edit.MOVE, graphic);

         on(app.editToolbar, 'graphic-move-stop', function(evt){

           featureLayer.applyEdits(null, [graphic], null);

           app.editToolbar.deactivate();

           map.enableMapNavigation();

           map.infoWindow.hide();

         });

       }

There is where I'm getting stuck.  Instead of the graphic moving when I drag the mouse, it still just pans the screen instead.     As long as my feature doesn't have an infoTemplate, the graphic drags.  Once I include one in my featureLayer constructor, navigation is not disabled and instead of dragging the graphic, it just pans.  I've tried hiding the infoWindow, but it isn't getting removed.

[TracySchloss]

I understand the way you're describing it, but there's a good chance the user might have an infoWindow open before they start.  They may see some information that needs to be changed and then click Start Editing.  Even though the graphic seems like it might be selected, because you just clicked it to see the information, it isn't.

[thejuskambi · Accepted solution]

Ok, now I understand what you mean.

Change the below function in myEditor.js file.

          createEditButton: function (map) {
                var tglButton = new ToggleButton({
                    showLabel: true,
                    label: 'Begin Editing',
                }, "tglEditButton");
                
                on(tglButton, 'change',lang.hitch(this, function (val) {
                    if (val) {
                        this.set('label', 'Stop Editing');
                        app.editEnabled = true;
                        map.infoWindow.hide();
                        
                        var selected = featureLayer.getSelectedFeatures();
                        if(selected && selected.length > 0){
                            var graphic = selected[0];
                            this.activateToolbar(graphic, map);
                        }
                        
                    } else {
                        this.set('label', 'Begin Editing');
                        app.editEnabled = false;
                    }
                }));
            },

The idea is to get the selected feature and setup the edit Toolbar when the graphic is already selected. I have not tested the code. Also you need to require dojo/_base/lang.

Hope this helps.

[TracySchloss]

With the lang.hitch, the use of 'this' doesn't work.  It's giving the error 'this.set is not a function'.  I get what you're saying, though.

[thejuskambi]

That's because I have changed the scope of the function. Change it to

tglButton.set('label', 'Stop Editing');

and

tglButton.set('label', 'Begin Editing');

or get the instance of ToggeButton and set the label.

[TracySchloss]

OK, that fixed that, but the map navigation gets turned back off again after moving it one time.  I'll have to look at the activateToolbar function next.   It's enabling mapNavigation at the end of every graphic-move-stop.