Thank you! Current toolbar code looks as follows. I understand now that the edit shall take place after load event. But I still don't understand how to modify "New Product" button event below to actually do this; when using remote. Please advice.
toolbar: {
items: [
{ type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener: function () {
//append empty row at the end.
var rowData = { ProductID: 34, UnitPrice: 0.2 }; //empty row
var rowIndx = grid.addRow( { rowData: rowData, checkEditable: true });
grid.goToPage({ rowIndx: rowIndx });
grid.editFirstCellInRow({ rowIndx: rowIndx });
}
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-disk', label: 'Save Changes', cls: 'changes', listener: function () {
saveChanges();
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', cls: 'changes', listener: function () {
grid.rollback();
grid.history({ method: 'resetUndo' });
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', cls: 'changes', listener: function () {
var changes = grid.getChanges({ format: 'byVal' });
if( console && console.log) {
console.log(changes);
}
alert("Please see the log of changes in your browser console.");
},
options: { disabled: true }
},
{ type: 'separator' },
{ type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener: function () {
grid.history({ method: 'undo' });
},
options: { disabled: true }
},
{ type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener: function () {
grid.history({ method: 'redo' });
},
options: { disabled: true }
}
]
},