How to save Id for dijit.form.ComboBox

Question

I'm writing my first dijit control for EPiServer. In my template I am using the dijit.form.ComboBox.

I have attached an event handler to the "onChange" event like so:

postCreate: function () {
        // call base implementation
        this.inherited(arguments);

        // Init textarea and bind event
        this.inputWidget.set("intermediateChanges", this.intermediateChanges);

        this.inputWidget.set("store", this.store);
        this.connect(this.inputWidget, "onChange", this._onInputWidgetChanged);
    },

Then in my event handler I have:

        _onInputWidgetChanged: function (e) {
        alert(e.id);
        this._updateValue(value);
    },

My issue is that as with a typical dropdown list, I want to store the Value rather than the Text. The options in my combobox look like so:

Value | Text 1 | "Test" 2 | "A different test"

The problem is that the value passed into the _onInputWidgetChanged handler is always the text value of the combobox i.e. "Test" or "A different test"

How can I get access to the Value instead? As I said, this is the first time I have ever worked with dojo and dijit so I may be missing something fundamental here.

Thanks in advance Al

Answer 1

The thing about ComboBox is that its value is not required to be an entry in the drop-down menu (and thus, not guaranteed to be one either). Think of it as a textbox with autosuggest - users can use the menu to expedite the process, but the value of the textbox is freeform and is reported as whatever the user types into it.

If you want users to be required to choose an entry from the menu, you should be using FilteringSelect instead, which will report the associated store item's ID (or associated option tag's value) as its value. As opposed to the free-form nature of ComboBox, FilteringSelect can be thought of as a menu with type-ahead functionality.