Using dijit.InlineEditBox with dijit.form.Select

Question

I'm trying to use a dijit.form.Select as the editor for my dijit.InlineEditBox. Two problems / unexpected behavior seem to occur:

1. Inconsistently, the InLineEditBox doesn't have the initial value set as selected
2. Consistently, after selecting a choice, the value that should be hidden is shown instead of the label.
3. The width isn't set to 130px

Here's working code: http://jsfiddle.net/mimercha/Vuet8/7/

The jist

<span dojoType="dijit.InlineEditBox" editor="dijit.form.Select" 
  editorParams="{ 
    options: [
      {label:'None',value:'none'},
      {label:'Student',value:'stu'},
      {label:'Professor',value:'prof',selected:true},
    ],
    style:'width:1000px;',
  }"
  editorStyle="width: 1000px;"
>
</span>

Any help is greatly appreciated! Thanks!

Answer 1

Okay, after a few MORE hours struggling with the mess that is dijit.InlineEditBox, I think I have the solution to the remaining issue (#2).

EDIT: My first solution to #2 is still flawed; the implementation at http://jsfiddle.net/kfranqueiro/Vuet8/10/ will never return the actual internal value when get('value') is called.

EDIT #2: I've revamped the solution so that value still retains the real (hidden) value, keeping displayedValue separate. See if this works better:

http://jsfiddle.net/kfranqueiro/Vuet8/13/

First, to recap for those who weren't on IRC:

Issue #1 was happening due to value not being properly set as a top-level property of the InlineEditBox itself; it didn't pick it up properly from the wrapped widget.

Issue #3 was happening due to some pretty crazy logic that InlineEditBox executes to try to resolve styles. Turns out though that InlineEditBox makes setting width particularly easy by also exposing it as a top-level numeric attribute. (Though IINM you can also specify a percentage as a string e.g. "50%")

Now, issue #2...that was the killer. The problem is, while InlineEditBox seems to have some logic to account for widgets that have a displayedValue attribute, that logic is sometimes wrong (it expects a displayedValue property to actually exist on the widget, which isn't necessarily the case), and other times missing entirely (when the InlineEditBox initializes). I've worked around those as best I could in my own dojo.declared extensions to InlineEditBox and the internal widget it uses, _InlineEditor - since generally it's a good idea to leave the original distribution untouched.

It's not pretty (neither is the underlying code I dug through to understand and come up with this), but it seems to be doing its job.

But man, this was rather interesting. And potentially pertinent to my interests as well, as we have used this widget in our UIs as well, and will be using it more in the future.

Let me know if anything backfires.

Answer 2

hm...

    <span dojoType="dijit.InlineEditBox" editor="dijit.form.Select" 
  editorParams="{ 
    options: [
      {label:'None',value:'none'},
      {label:'Student',value:'stu'},
      {label:'Professor',value:'prof',selected:true},**<<<<** and this comma is for?
    ],
    style:'width:1000px;',**<<<<** and this comma is for?
  }"
  editorStyle="width: 1000px;"
>
</span>

Also, when using dijit.form.Select, selected value is not attr "selected" but value.

And if you enter prof inside <span ...blah > prof </span> than your proper selected option will be selected ;)

Dijit select checks for VALUE, not attr.

Answer 3

This may be fixed in recent Dojo - see http://bugs.dojotoolkit.org/ticket/15141 - but using 1.7.3 I found this worked:

In my app directory, at the same level as dojo, dijit and dojox, I created a file InlineSelectBox.js which extends InlineEditBox with code to set the HTML on the associated domNode from the value of the Dijit, and which wires up that code to the onChange() event:

define(["dijit/InlineEditBox", 
        "dijit/form/Select",
        "dojo/on",
        "dojo/_base/declare",
        "dojo/_base/array"
        ],
function(InlineEditBox, Select, on, declare, array){
    return declare(InlineEditBox, {
        _setLabel: function() {
            array.some(this.editorParams.options, function(option, i){
                if (option.value == this.value) {
                    this.domNode.innerHTML = option.label;
                    return true;
                }
                return false;
            }, this);
        },

        postMixInProperties: function(){
            this.inherited(arguments);
            this.connect(this, "onChange", "_setLabel");
        },

        postCreate: function(){
            this.inherited(arguments);
            this._setLabel();
        }
    });
});

Then, in my view script:

require(["dojo/ready", 
         "app/InlineSelectBox",
         "dijit/form/Select"
         ],
function(ready, InlineSelectBox, Select){
    ready(function(){
        // Add code to set the options array
        var options = [];
        // Add code to set the initial value
        var initialValue = '';
        var inlineSelect = new InlineSelectBox({
            editor: Select,
            editorParams: {options: options},
            autoSave: true,
            value: initialValue
        }, "domNodeToAttachTo");
    });
});

Answer 4

I was dealing with this situation a few months ago, and not finding a resolution i made my own algorithm.

I put a div with an event on Onclick that build programatically a Filtering Select on that div with the store i want to use.

function create(id,value){
    var name =  dojo.byId(id).innerHTML;
    dojo.byId(id).parentNode.innerHTML = '<div id="select"></div>';

    new dijit.form.FilteringSelect({
        store: store,
        autoComplete: true,
        invalidMessage:"Invalid Selection",
        style: "width: 80px;",  
        onBlur: function(){ },  
        onChange: function(){ },
        required: true,
        value: value,
        disabled: false,
        searchAttr: "name",
        id: "status"+id,
        name: "status"
    },"select");

    dijit.byId('status'+id).focus();
}

I used the onBlur event to destroy the widget and the onchange to save by xhr the new value.

The focus is below because the onBlur was not working properly.

note: the function is not complete.