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.
I have determined that if the ‘a’ tag is appended to the input after the igNumeric editor is initialized, the classes are applied as expected. The custom editor provider could be created as follows:
createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {
globalCallbacks = callbacks;
element = element || $('<input/>');
var aTag = document.createElement('a')
aTag.textContent = "Select";
aTag.style.color = "black";
aTag.addEventListener('click', clickA);
this._super(callbacks, key, editorOptions, tabIndex, format, element);
this.destroy();
$(element).igNumericEditor();
element.on("keydown", $.proxy(this.keyDown, this));
this.editor = {};
if (element[0].parentElement.parentElement.parentElement.children.length == 1)
element[0].parentElement.parentElement.append(aTag);
this.editor.element = element;
return element;
},
igGridCustomEditorProvider.zip