как создать пользовательский поставщик редактора в сетке ignite ui с помощью angular js

Я использую директиву сетки Ignite UI с angular js. В этом я создаю пользовательский поставщик редактора, расширяя $.ig.EditorProvider и используя этот редактор в разметке html как

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

но когда я редактирую сетку, появляется ошибка

provider.createEditor is not a function

пожалуйста, помогите мне


person Gaurav Jain    schedule 22.07.2016    source источник
comment
Какую версию пользовательского интерфейса Ignite вы используете? Чтобы получить версию, выполните следующий код в консоли JavaScript: $.ui.igGrid.version   -  person Martin Pavlov    schedule 22.07.2016


Ответы (1)


Написанное таким образом значение «редактор-поставщик» будет оцениваться как строка. Чтобы выражение было преобразовано в объект, его необходимо заключить в {{}} (двойные фигурные скобки). Однако оператор «new $.ig.EditorProviderNumber()» не будет анализироваться парсером выражений Angular 1, поэтому вам нужно использовать функцию области видимости для создания объекта.

Вот код:

// 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>
person Martin Pavlov    schedule 22.07.2016
comment
Еще раз, какую версию пользовательского интерфейса Ignite вы используете? Чтобы получить версию, выполните следующий код в консоли JavaScript: $.ui.igGrid.version - person Martin Pavlov; 26.07.2016
comment
Фрагмент кода igGridUpdating.editorProvider не работает в Ignite UI версии 15.2 и выше. Я добавил источник $.ig.EditorProviderNumber в свой ответ. Команда Ignite UI создаст запрос на исправление фрагмента кода. - person Martin Pavlov; 27.07.2016