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

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
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
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
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
Vote:
 

Beautiful, thank you so much

#193185
May 24, 2018 17:08
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.