Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
EditorProvider in row edit dialog
posted

I'm trying to use a custom editor provider in a grid's row edit dialog. The editor should be a numeric input wrapped in a div. I want an anchor tag after the input that opens a dialog. 

My problems are:

  • The numeric input is created, but it is missing styling (borders) because the two wrapper divs (with classes 'ui-igedit-container' and 'ui-igeditor-input-container ui-corner-all') aren't created like they are for the other editors not using a custom editor provider.
  • The 'required' validation attributes ( ui-igvalidator-target) isn't being added to the input. I assume this means that the required setting isn't being applied.I was hoping the call the super create editor would take care of this.

Here's the code for the column setting:

new ColumnUpdatingSetting()
        {
            ColumnKey = "OldProductId",
            EditorType = ColumnEditorType.Numeric,
            Required = true,
            NumericEditorOptions = new NumericEditorModel
            {
                DataMode = NumericEditorDataMode.Int,
                GroupSeparator = "",
           
            },
            EditorProvider = "new $.ig.previousIpEditor()"
        };

And the editor provider:

window.$.ig.previousIpEditor = $.ig.previousIpEditor || $.ig.EditorProvider.extend({
    createEditor: createEditor,
    keydown: keydown,
    setSize: setSize,
    attachErrorEvents: (errorShowing, errorShown, errorHidden) => { },
    getValue: function () {
        return this.input.val();
    },
    setValue: function (val) {
        this.input.val(val);
    },
    destroy: () => this.editor.remove()
});


function createEditor(callbacks, key, editorOptions, tabIndex, format, element) {
    const div = $('<div></div>');

    const input = $('<input data-editor-for-oldproductid />');
    input.igNumericEditor(editorOptions);

    this._super(callbacks, key, editorOptions, tabIndex, format, input);

    div.append(input);
    this.input = input;

    const a = $('<a>Select</a>');
    a.on('click', createDialog);
    div.append(a);
    
    $('input[data-editor-for-oldproductid]').replaceWith(div);

    return element;
}