Adding new row to SlickGrid

Question

I have a slickgrid using the dataview. From what I can tell, the grid's add new row event isn't called until after the first new row field's editor is complete. The field I was editing is a custom editor that uses a input box with autocomplete and save the selected item "value" to the grid source data. The problem is the new "item" source isn't created until the grid add new row event is fired. I know there is a way around this and just want to know what is the best way to solve for this.

Thanks.

//Add new row event

grid.onAddNewRow.subscribe(function (e, args) {
                       var item = args.item;
                       addnewid = addnewid - 1;
                       item.inventorytransferdetailid = addnewid;                          
                       $.extend(item, args.item);
                       dataView.addItem(item);
                   });

// Custom editor
function Suggest2(args) {
    var $input;
    var defaultValue;
    var scope = this;
    this.init = function () {
        $input = $("<INPUT type=text class='editor-text' />")
        $input.width = args.column.width;
        $input.appendTo(args.container);
        $input.focus();
        $input.bind("keydown.nav", function (e) {
            if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                e.stopImmediatePropagation();
            }
            else if ($input.val().length > 0) {
                $.ajax({
                    type: "GET",
                    url: "http://localhost:11111/GetProducts/" + $input.val(),
                    dataType: "json",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        $input.autocomplete({
                            source: data,
                            select: function (event, ui) {
                                var v = ui.item.value;
                                var l = ui.item.label;
                                //Set "display" field with label  
                                args.item[args.column.field] = l;
                                this.value = l;
                                //Set "hidden" id field with value
                                args.item["productid"] = v;
                                return false;
                            }
                        });
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            }
        }) 
    }; 
    this.destroy = function () {
        $input.remove();
    }; 

    this.focus = function () {
        $input.focus();
    };



    this.getValue = function () {
        return $input.val();
    };



    this.setValue = function (val) {
        $input.val(val);
    };

    this.loadValue = function (item) {
        defaultValue = item[args.column.field] || "";
        $input.val(defaultValue);
        $input[0].defaultValue = defaultValue;
        $input.select();
    };



    this.serializeValue = function () {
        return $input.val();
    };


    this.applyValue = function (item, state) {
        //item[args.column.field] = state;
    };



    this.isValueChanged = function () {
        return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
    };



    this.validate = function () {
        if (args.column.validator) {
            var validationResults = args.column.validator($input.val());
            if (!validationResults.valid) {
                return validationResults;
            }
        }



        return {
            valid: true,
            msg: null
        };
    };
    this.init();
}

Answer 1

You can try below code.

function add_new_row(){
item = {
      "id": (Math.round(Math.random()*-10000))
    };
data_view.insertItem(0, item);
}

Then, bind with button.

<button onclick="add_new_row()">Add Row</button>