BearPanther.com

Add button to Esri’s default editing widget

Introduction

user

panther


LATEST POSTS

Install Atom behind corporate proxy 08th July, 2016

Simple editing using an ArcGIS Online web map 08th April, 2013

Blog

Add button to Esri’s default editing widget

Posted on .

This is a very quick post on adding a button to the default editor widget. This is straightforward after you know what you are looking for. AKA use firebug or chrome dev tools. There will not be a bunch of code and technically the button will not do anything but the idea is is to keep this simple.

Using the sample jump into the initEditing function. The changes take place after this line.

var editorWidget = newesri.dijit.editing.Editor(params, 'editorDiv');

We need to hook into the editor widget and we are looking to extend the attribute inspector. The Attribute inspector is built into this widget so we do not need much.

var ref = editorWidget.attributeInspector ;

That gives us a reference to the attributeInspector. With that we can add the save button that you find in the attributeInspector sample.

var saveButton = new dijit.form.Button({label:"Save","class":"saveButton"});
 dojo.place(saveButton.domNode, ref.deleteBtn.domNode, "after");

Add the CSS for the save button.

.saveButton {
 padding-left:45px;
 margin:0px;width:16px; height:16px;
 }

Thats it! The only line that separates this from the Attribute Inspector sample is getting the reference to the built in attribute inspector.  Since it is already available we can use it.

Comments
user

Author Ganesh

Posted at 12:12 pm December 5, 2013.

Adding a save button to my editor widget works perfectly for me. The only problem is with the CSS, the Save button is sitting on top of the delete button, I tired to change the CSS properties with padding-right : 45 px instead of padding-left, even then, I am seeing save button sitting on top of delete. Any help would be much appreicatied.

Reply
user

Author Chris

Posted at 11:52 am July 24, 2015.

Although I don’t usually recommend the use of “!important,” this will fix the issue Ganesh described:

.atiDeleteButton {
/*This fixes the formatting issues on the standard ESRI Editor popup window.*/
/*Specifically, it eliminates the appearance of scroll bars within the popup.*/
/*It also allows the addition of more buttons to the popup window (Save).*/
width:55.1875px !important;
height:24px !important;
margin:2.4px !important;
}

Reply

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (2) ...