jQWidgets Forums

Hello,

I have seen a couple of posts similar to this, but I have not yet discovered the correct way to do this. I want to let the user click an “Add” button that will:

1. Add new row to the grid (this part I get)
2. Select the first column of the new row and have it ready for the user to begin editing without them having to click on the grid first.

I am calling “begincelledit” after adding the new row, but it will never perform the behavior I am looking for. I can, however, add a “test” button that calls “begincelledit” in the exact same way and the behavior I am looking for is there. I tried using JQuery promises to be sure it was not an out-of-sync issue, but it does not appear to be.

If I call “begincelledit” after calling “addrow”, I notice “cellbeginedit” fires, immediately followed by “cellendedit”. If I use the “Test” button, only “cellbeginedit” is fired (allowing me to edit the cell).

Is there a proper way to do this? Below is an example of what I am trying using a promise to ensure the “addrow” call has completed:

function pageReady(model) {
var _testGrid = $(“#dealersGrid”);
var rowsArray = [];
var _add = $(“#addNewRow”);
var _test = $(“#testFunction”);

var gridSource = {
datafields:
[
{ name: ‘Field1’ },
{ name: ‘Field2’ },
{ name: ‘Field3’ },
{ name: ‘Field4’ },
{ name: ‘Field5’ }
],
addrow: function (rowid, rowdata, position, commit) {
rowsArray.push(rowdata);
commit(true);
},
deleterow: function (rowid, commit) {
commit(true);
},
updaterow: function (rowid, rowdata, commit) {
commit(true)
}
};

_testGrid.jqxGrid(
{
width: ‘1200px’,
source: gridSource,
autoheight: true,
height: 200,
altrows: true,
sortable: false,
theme: ‘classic’,
editable: true,
columns: [
{
text: ‘Field 1’,
datafield: ‘Field1’,
width: ‘10%’
},
{
text: ‘Field 2’,
datafield: ‘Field2’,
width: ‘60%’
},
{
text: ‘Field 3’,
datafield: ‘Field3’,
width: ‘10%’
},
{
text: ‘Field 4’,
datafield: ‘Field4’,
width: ‘10%’,
cellsalign: ‘right’
},
{
text: ‘Field 5’,
datafield: ‘Field5’,
width: ‘10%’
}]
});

_testGrid.on(‘rowclick’, function (event) {
var args = event.args;
});

_testGrid.on(‘bindingcomplete columnresized columnreordered columnclick cellclick celldoubleclick cellselect cellunselect cellvaluechanged cellbeginedit cellendedit filter groupschanged groupexpand groupcollapse pagechanged pagesizechanged rowclick rowdoubleclick rowselect rowunselect rowexpand rowcollapse sort’, function (e) {
$(document.body).append(e.type + “\n”);
})

_add.on(‘click’, function () {
addTheRow().done(function () {
_testGrid.jqxGrid(‘begincelledit’, _testGrid.jqxGrid(“getrows”).length – 1, “Field1”);
})
})

_test.on(‘click’, function () {
_testGrid.jqxGrid(‘begincelledit’, _testGrid.jqxGrid(“getrows”).length – 1, “Field1”);
})

function addTheRow() {
var _deferred = $.Deferred();
var commit = _testGrid.jqxGrid(‘addrow’, null, {});
if (commit) {
_deferred.resolve();
return _deferred.promise();
}

_deferred.reject();
return _deferred.promise();
}
}