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:
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; }
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>
</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
That is a good idea, but don't work in our situation. The grid columns are dynamic, and the editors in question may or may not be included in the dialog.
That's a good idea, but won't work for out situation. The grid columns are dynamic, and the editors mentioned above may or may not be included in the dialog.