I am using Ignite UI grid directive with angular js.
In that I am creating custom editor provider by extending $.ig.EditorProvider
and using that editor in html markup as
<column-setting column-key="comments" editor-provider="new $.ig.EditorProviderNumber()">
</column-setting>
but when I edit grid its showing error
provider.createEditor is not a function
plz help me
Written this way the "editor-provider" value will be evaluated as string. In order for the expression to be parsed to an object you need to enclose it in {{}} (double curly braces). However the statement "new $.ig.EditorProviderNumber()" will not be parsed by the Angular 1 expression parser, so you need to use a scope function to create the object.
Here is the code:
// This editor provider demonstrates how to wrap HTML 5 number INPUT into editor provider for the igGridUpdating
$.ig.EditorProviderNumber = $.ig.EditorProviderNumber || $.ig.EditorProvider.extend({
// initialize the editor
createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {
element = element || $('<input type="number" />');
/* call parent createEditor */
this._super(callbacks, key, editorOptions, tabIndex, format, element);
element.on("keydown", $.proxy(this.keyDown, this));
element.on("change", $.proxy(this.change, this));
this.editor = {};
this.editor.element = element;
return element;
},
keyDown: function(evt) {
var ui = {};
ui.owner = this.editor.element;
ui.owner.element = this.editor.element;
this.callbacks.keyDown(evt, ui, this.columnKey);
// enable "Done" button only for numeric character
if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105)) {
this.callbacks.textChanged(evt, ui, this.columnKey);
}
},
change: function (evt) {
var ui = {};
ui.owner = this.editor.element;
ui.owner.element = this.editor.element;
this.callbacks.textChanged(evt, ui, this.columnKey);
},
// get editor value
getValue: function () {
return parseFloat(this.editor.element.val());
},
// set editor value
setValue: function (val) {
return this.editor.element.val(val || 0);
},
// size the editor into the TD cell
setSize: function (width, height) {
this.editor.element.css({
width: width - 2,
height: height - 2,
borderWidth: "1px",
backgroundPositionY: "9px"
});
},
// attach for the error events
attachErrorEvents: function (errorShowing, errorShown, errorHidden) {
// implement error logic here
},
// focus the editor
setFocus: function () {
this.editor.element.select();
},
// validate the editor
validator: function () {
// no validator
return null;
},
// destroy the editor
destroy: function () {
this.editor.remove();
}
});
sampleApp.controller('sampleAppCtrl', function ($scope) {
$scope.getProvider = function () {return new $.ig.EditorProviderNumber()};
});
<column-setting column-key="ProductNumber" editor-provider="{{getProvider()}}"></column-setting>
