2016-07-22 24 views
2

Ich bin mit Ignite UI Raster Direktive mit Winkeln js erstellen. Indem ich benutzerdefinierten Editor-Provider bin die Schaffung von $.ig.EditorProvider und die Verwendung dieser Editor in HTML-Markup alswie benutzerdefinierte Editor-Provider in Ignite ui Raster mit Winkel js

<column-setting column-key="comments" editor-provider="new $.ig.EditorProviderNumber()"> 
</column-setting> 

erstreckt, aber wenn ich Gitterfehler

provider.createEditor is not a function 

plz mir zeigt seine bearbeiten helfen

+0

Was ist der Ignite UI-Version, die Sie verwenden? Um die Version zu erhalten, führen Sie bitte den folgenden Code in der JavaScript-Konsole aus: $ .ui.igGrid.version –

Antwort

4

Auf diese Weise wird der Wert "editor-provider" als String ausgewertet. Um den Ausdruck zu einem Objekt analysiert werden, müssen Sie es in {{}} (Doppel geschweiften Klammern) umschließen. Doch die Aussage „neuer $ .ig.EditorProviderNumber()“ wird nicht durch die Angular 1 expression parser analysiert werden, so dass Sie eine Scope-Funktion verwenden müssen, um das Objekt zu erstellen. Hier

ist der 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> 
+0

Fehler erhalten this.editor.element wird nicht gefunden ... –

+0

Noch einmal, was ist die Ignite UI-Version, die Sie sind benutzen? Um die Version erhalten Sie den folgenden Code in der JavaScript-Konsole ausführen: $ .ui.igGrid.version –

+0

"16.1.20161.1009" –