Slickgrid - populate new row immediately on display

Question

I am making an editable slickgrid with enableAddNewRow: true.

I want each new row to have default data, as soon as it shows up.

The suggested solution in example 4 is to use the onAddNewRow event:

grid.onAddNewRow.subscribe(function (e, args) {
    var item = {"num": data.length, "id": "new_" + (Math.round(Math.random() * 10000)), "title": "New task", "duration": "1 day", "percentComplete": 0, "start": "01/01/2009", "finish": "01/01/2009", "effortDriven": false};
    $.extend(item, args.item);
    dataView.addItem(item);
});

This is not quite what I want however, because the onAddNewRow event does not fire until you put a value in one of the cells (ie. you have to type something in one of the cells and then tab/click away from the cell, before the default values are shown in the row).

What I need is a way to insert the default values as soon as the new line shows up in the grid.

Anyone have a suggestion?

Edit So, on further experimentation, I have come up with the following:

grid.onBeforeEditCell.subscribe(function(e, args) {
    if (typeof args.item === 'undefined) {
        grid.onAddNewRow.notify({}, null, null);
    }
})

which adds the new row with the default data, as soon as the first cell in a new row is accessed.

My problem now is, that the cell editor is opened before the new row is completely added, meaning, that the editor does not pick up the default value, since it was still undefined at the time of initialization of the editor.

Answer 1

Since your problem seems like timing issue, it would be recommended to use a timeout (jQuery or raw javascript). I mention jQuery since first of all SlickGrid runs on top of jQuery but also because quite often with jQuery we need to insert some timeout() especially for Firefox as it renders differently. That being said, you could try to use the jQuery timeout() function as this:

setTimeout(function() {
      // Do something after 1 second... 
}, 1000);