On-page editing with custom dojo property editor not calling

On-page editing with custom dojo property editor not calling _setValueAttr

Peter Arsenyev

Vote:

I have a simple dojo editor that works just fine on a page in all-properties view. Specifically, these fields are for a block which is used as a page property. In all-properties view, _setValueAttr is called (confirmed with console logging), and it sets the initial value correctly.

HOWEVER, on my page in on-screen-edit I have an @Html.EditAttributes(m => m.CurrentPage.Block). This brings up a modal dialog similar to that of the all-properties view but hovering above the page view. In this instance the default values are not set correctly, and onChange the incorrectly set values get saved back as well. Using console logging I can see that _setValueAttr in this case is not being called at all. Is there any way to fix this or is this not possible?

define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_TemplatedMixin"
], function (
    declare,
    _Widget,
    _TemplatedMixin) {

    return declare([_Widget, _TemplatedMixin], {

        // templateString: [protected] String
        //    A string that represents the default widget template.
        templateString: 
            ' \
             \
             \
            ',

        startup: function() {
            console.log
        },

        _onChange: function (event) {
            // summary:
            //    Handles the textbox change event and populates this to the onChange method.
            // tags:
            //    private
            console.log("onChange(" + event + ") called");
            this._set('value', event.target.value);
            this._setValueAttr(event.target.value);
            this.onChange(this.value);
        },

        _setValueAttr: function (value) {
            // summary:
            //    Sets the value of the widget to "value" and updates the value displayed in the textbox.
            // tags:
            //    private

            this._set('value', value);
            this.color.value = this.value || '';
            this.colortext.value = this.value || '';
            console.log("setValueAttr(" + value + ") called");
            console.log("by " + arguments.callee.caller.name.toString());
        }
    })
});

#192629

Edited, May 21, 2018 21:18

Mattias Olsson

Vote:

First of all, make sure to also inherit from "dijit/_WidgetsInTemplateMixin" and set data-dojo-type="dijit/form/TextBox" on your text input. Then add this at the top of your startup method:

this.inherited(arguments);

I wouldn't call _setValueAttr in the _onChange method. Just this.set('value', event.target.value) should be enough.

Let's take it from there. :)

#193151

Edited, May 24, 2018 8:15

Mattias Olsson

Vote:

Btw, I would also change _setValueAttr so the color text box value is set in "proper way" :)

_setValueAttr: function (value) {
    // summary:
    //    Sets the value of the widget to "value" and updates the value displayed in the textbox.
    // tags:
    //    private

    this._set('value', value);
    this.colortext.set('value', value || '');
    this.color.value = value || '';
    console.log("setValueAttr(" + value + ") called");
    console.log("by " + arguments.callee.caller.name.toString());
}

#193153

Edited, May 24, 2018 8:28

Mattias Olsson

Vote:

Got a complete and working sample for you here:

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/on",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin"
], function (
    declare,
    lang,
    on,
    _Widget,
    _TemplatedMixin,
    _WidgetsInTemplateMixin) {

    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {

        value: null,
        widgetsInTemplate: true,
        // templateString: [protected] String
        //    A string that represents the default widget template.
        templateString:
            '<div> \
            <div data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="colortext"></div> \
            <input type="color" data-dojo-attach-point="color" data-dojo-attach-event="onchange:_updateFromColorInput" /> \
            </div>',

        startup: function () {
            this.inherited(arguments);
            console.log('startup');
        },

        postCreate: function() {
            this.inherited(arguments);
            this.colortext.on('change', lang.hitch(this, this._updateValue));
        },

        _updateFromColorInput: function(event) {
            this._updateValue(event.target.value);
        },

        _updateValue: function (value) {
            // summary:
            //    Handles the textbox change event and populates this to the onChange method.
            // tags:
            //    private
            console.log("onChange(" + value + ") called");
            this.set('value', value);
            this.onChange(value);
        },

        _setValueAttr: function (value) {
            // summary:
            //    Sets the value of the widget to "value" and updates the value displayed in the textbox.
            // tags:
            //    private

            this._set('value', value);
            this.colortext.set('value', value || '');
            this.color.value = value || '';
            console.log("setValueAttr(" + value + ") called");
            //console.log("by " + arguments.callee.caller.name.toString());
        }
    })
});

#193154

Edited, May 24, 2018 8:56

Peter Arsenyev

Vote:

Beautiful, thank you so much

#193185

May 24, 2018 17:08