Adding a new row to SlickGrid

I have slickgrid using dataview. From what I can tell, the grid add new row event is not called until the first new row field editor is completed. The field I edited is a custom editor that uses an autocomplete input field and saves the selected value "value" in the grid source data. The problem is that the new source "item" is not created until the grid adds a new row event. I know that there is a way around this and I just want to know how best to solve this issue.

Thank.

//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();
}