Add new callback 'onEditRowInserted'

[jshensh]

No description provided.

[tabalinas]

Could you please share usecases for this callback?

[jshensh]

Array.prototype.diff = function(a) {
    return this.filter(function(i) { return a.indexOf(i) < 0; });
};

var tagField = function(config) {
    jsGrid.Field.call(this, config);
};

tagField.prototype = new jsGrid.Field({
    sorting: false,

    getDom: function() {
        var selectDom = $("<select />").addClass('tagSelect').attr('multiple', 'multiple').css('width', '100%'),
            values = arguments[0] || [];

        for (var i = 0; i < values.length; i++) {
            selectDom.append($('<option value="' + values[i] + '" selected="selected">' + values[i] + '</option>'));
        }

        doAjaxPromise('/api/v1/Tags', 'get', {})
            .success(function(data) {
                if (!data.length) {
                    return;
                }
                data = data.diff(values);
                for (var i = 0; i < data.length; i++) {
                    selectDom.append($('<option value="' + data[i] + '">' + data[i] + '</option>'));
                }
                selectDom.trigger('change');
            });
        
        return selectDom;
    },

    itemTemplate: function(value, row) {
        return (value && value.length) ? value.join(', ') : 'N/A';
    },
    
    insertTemplate: function() {
        return this._insertPicker = this.getDom();
    },
    
    editTemplate: function(value, row) {
        return this._editPicker = this.getDom(value);
    },
    
    insertValue: function() {
        return this._insertPicker.val();
    },
    
    editValue: function() {
        return this._editPicker.val();
    }
});

jsGrid.fields.tag = tagField;

$("#jsGrid").jsGrid({
    width: "100%",

    inserting: true,
    editing: true,
    sorting: false,
    autoload: true,

    fields: [{
        name: "name",
        type: "text",
        align: "center"
    }, {
        name: "tags",
        title: "Tags",
        type: "tag",
        align: "center"
    }, {
        type: "control"
    }],

    onError: function(args) {
        if (args["args"][0]["responseJSON"]) {
            toastr.error(args["args"][0]["responseJSON"]["error"], 'Error', { timeOut: 3000 });
        } else {
            toastr.error('Unknown error', 'Error', { timeOut: 3000 });
        }
    },

    onItemInserted: function(args) {
        args["grid"]["_container"].jsGrid("loadData");
    },

    onRefreshed: function(args) {
        var insertRow = args['grid']['_insertRow'];
        if (insertRow.css('display') !== 'none') {
            var insertRowTagSelect = insertRow.find('select.tagSelect');
            if (insertRowTagSelect && insertRowTagSelect.css('display') !== 'none') {
                insertRowTagSelect.select2({tags: true});
            }
        }
    },

    onEditRowInserted: function(args) {
        var editRow = args['editRow'];
        if (editRow.css('display') !== 'none') {
            var editRowTagSelect = editRow.find('select.tagSelect');
            if (editRowTagSelect && editRowTagSelect.css('display') !== 'none') {
                editRowTagSelect.select2({tags: true});
            }
        }
    },

    controller: {
        loadData: function(filter) {
            return $.ajax({
                type: "GET",
                url: "/api/v1/Cabinet",
                data: filter
            });
        },

        insertItem: function(item) {
            var self = this;
            return $.ajax({
                type: "POST",
                url: "/api/v1/Cabinet",
                data: item
            });
        },

        updateItem: function(item) {
            return $.ajax({
                type: "PUT",
                url: "/api/v1/Cabinet/" + item["id"],
                data: item
            });
        },

        deleteItem: function(item) {
            return $.ajax({
                type: "DELETE",
                url: "/api/v1/Cabinet/" + item["id"]
            });
        }
    }
});

I used https://select2.github.io/examples.html#tags, this plugin need select box's position. An error occurs if the value of "display" cannot be fetched. My English is not good, sorry.

[tabalinas]

@jshensh, have you checked out the following issue #141?
Looks like it addresses the problem.

[jshensh]

@tabalinas I think use callback can be directly returned the "editRow" object, more convenient.