I've a grid with Infinite scrolling functionality.
I've a button there to add a new row so that user can enter data and it can be saved in database.
Autosave functionality is also enabled so as soon as i click on "New Item" button, grid saves itself and returns item ID.
All these things work fine when there are less rows.
Once there are a lot of rows and when i click on "New Items" button, grid scrolls to the bottom first and then adds a new row.
But Autosave does not call this time.
If i again click on "New Item" button then it creates a new row, first cell is in edit mode and then Autosave calls automatically and then it returns ID for the newly added row.
I am not sure why i does not call autosave first time when grid scrolls to bottom and a new row is added.
Please suggest what should i need to do.
Here is my toolbar code:
toolbar: {
items: [{
type: 'button',
icon: 'ui-icon-plus',
label: 'New Item',
listener: function () {
//append empty row at the end.
var rowData = {
catAttr_138022: "",
catAttr_138021: "",
}; //empty row template
var rowIndx = $grid.pqGrid('addRow', { rowData: rowData });
$grid.pqGrid('goToPage', { rowIndx: rowIndx });
$grid.pqGrid('editFirstCellInRow', { rowIndx: rowIndx });
}
},
{ type: 'separator' },
{
type: 'button',
icon: 'ui-icon-arrowreturn-1-s',
label: 'Undo',
cls: 'changes',
options: { disabled: true },
listener: {
"click": function (evt, ui) {
$grid.pqGrid("history", { method: 'undo' });
}
}
},
{
type: 'button',
icon: 'ui-icon-arrowrefresh-1-s',
label: 'Redo',
options: { disabled: true },
listener: {
"click": function (evt, ui) {
$grid.pqGrid("history", { method: 'redo' });
}
}
}]
},
