Добавление новой строки в SlickGrid

Question

У меня есть slickgrid с использованием dataview. Из того, что я могу сказать, добавление новой строки сетки не вызывается до тех пор, пока не будет закончен первый редактор поля новой строки. Поле, которое я редактировал, представляет собой настраиваемый редактор, который использует поле ввода с автозаполнением и сохраняет выбранное значение «значение» в данных источника сетки. Проблема в том, что новый источник «item» не создается до тех пор, пока сетка не добавит новое событие строки. Я знаю, что есть способ обойти это, и просто хочу знать, как лучше всего это решить.

Спасибо.

//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

Вы можете попробовать нижеследующий код.

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

Затем свяжите с кнопкой.

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