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;
}

Parents
  • 1300
    Offline posted

    Hello,

    After investigating this further, I have determined that the wrapper divs and the css classes are not applied because another element is appended to the input.

    What I could suggest is using the default numeric editor as editor provider and wrapping the editor and the ‘a’ tag inside a div by using a dialog template. This could be achieved as follows:

       <div style="float: left; width:50%; margin-left: 15px; margin-top: 15px;" id="templateContainer">

                <strong style="margin-left: 5px">${Name}</strong><br /><br />

                <table id="dialogTmpTable" style="width: 50%;">

                    . . .

                    <tr>

                        <td><span>Age</span></td>

                        <td>

                            <div>

                            <div data-editor-for-age></div>

                            <a onclick="clickA()">Select</a>

                            </div>

                        </td>

                    </tr>

                </table>

            </div>

        </script>

    . . .

    features: [

     {

             columnSettings: [

             {

                    columnKey: "Age",

                    editorType: "numeric",

                    required: true

             } ],

             editMode: "dialog",

             name: "Updating",

             rowEditDialogOptions: {

                  dialogTemplateSelector: "#dialogTemplate",

             }

     } ],

    More information regarding configuring the row edit dialog could be found in the following topic of our documentation.

    Below I am attaching a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.

    Regards,
    Monika Kirkova,
    Infragistics

    igGridCustomDialogTemplate.zip

Reply Children