Dojo: The Definitive Guide

InlineEditBox

The InlineEditBox is often described as a wrapper widget in that it provides a marked-up static display for what is really an editable control—then, when you're ready to edit it, you do so inline by simply selecting it. For example, instead of having a fixed size, editable TextBox always visible on the screen, you could wrap it in an InlineEdit box and it would appear as ordinary markup on the screen (like a label), but when you select it, it transforms back into a TextBox for editing. When editing completes as signaled by an event, such as the Enter key being pressed, it switches back to markup.

In its simplest usage, you might simply wrap a TextBox in an InlineEditable as part of a form letter application, like the following example. Note that what would have normally appeared as a TextBox and cluttered up the display is presented just like ordinary markup, while clicking on it transforms it into an editable control:

Dear <span dojoType="dijit.InlineEditBox" autoSave="false"
  editor="dijit.form.TextBox">Valued Customer</span>:

<div>We have received your request to be removed from our spam list. Not to
worry, we'll remove you when we're good and ready. In the meanwhile, please do
not hesitate to contact us with further complaints.</div>

<div>Sincerely,</div>
<span dojoType="dijit.InlineEditBox" autosave="false"
  editor="dijit.form.TextBox">Customer Service</span>

To recap, the autosave attribute being set to false results in the control presenting Save and Cancel buttons (the text would normally have been saved as it was typed with no controls displayed at all). That's the basic concept. Now, let's expand on these concepts by trying out a different Editor.

Here's a quick example of an InlineEditBox wrapping up a Textarea. Note that the renderAsHtml allows us to provide markup and have it automatically rendered on the spot:

Dear <span dojoType="dijit.InlineEditBox" autoSave="false"
  editor="dijit.form.TextBox">Valued Customer</span>:

<div dojoType="dijit.InlineEditBox" autoSave="false" editor="dijit.form.Textarea"
  renderAsHtml="true">
    Insert<br>
    Form<br>
    Letter<br>
    Here<br>
</div>

<div>Sincerely,</div>

<span dojoType="dijit.InlineEditBox"
  autoSave="false" editor="dijit.form.TextBox">Customer Service</span>

Like the previous dijits in this chapter, the basic usage is quite simple, but Table 15-9 shows a few extra configuration items to be aware of and keep on hand.

Table 15-9. InlineEditBox API

Name	Type	Comment
editing	Boolean	The edit state of the InlineEditBox. true when it is in editing mode.
autoSave	Boolean	Whether changing the value automatically should save it without requiring any kind of explicit action. true by default.
buttonSave	String	The text string to display on the Save button. Empty by default.
buttonCancel	String	The text string to display on the Cancel button. Empty by default.
renderAsHtml	Boolean	If true, renders the InlineEditBox 's editor contents as HTML. false by default.
editor	String	The class name for the dijit that should act as the editor. dijit.form.TextBox by default.
editorParams	Object	Any parameters that should be passed in when constructing the editor for the InlineEditBox.
width	String	The width of the editor. 100% by default.
value	String	The display value of the widget when in read-only mode.
noValueIndicator	String	The placeholder that should be displayed when there is no text value (so that the user has a place to click on and trigger an edit). A wingdings placeholder is there by default.
setDisabled(/*Boolean*/disabled)	Function	Used to disable and enable the widget.
setValue(/*String*/val)	Function	Sets the value of the widget.
save	Function	Saves the contents of the editor and reverts to display mode.
cancel	Function	Discards any changes made in the editor and reverts to display mode.
onChange	Function	An extension point that can be used to be notified of changes to the value.
enableSave	Function	A user-replaceable function that can be used to enable and disable the Save button. (For example, you might disable the button because of invalid conditions in the editor.)