When our users are double clicking on a cell for editing its contents, the grid is removing all the rows above the one that was clicked on. I was able to narrow the the issue to having the height option on the grid set to 'flex'. It only happens when that option is set to that value. Is there another way to use the flex height without having the sort of issue we're having?
Our editable cell is set up like this:
{dataIndx: 'foo',
title: 'Foo',
dataType: 'stringi',
width: '17%',
minWidth: 175,
editable: true}
Our grid has the following options:
{
bootstrap: { on: true, grid: "pq-small-font-grid" },
collapsible: { on: false, toggle: false },
columnTemplate: { halign: 'center', minWidth: 40, resizable: true },
roundCorners: true,
showTop: false,
showTitle: false,
showBottom: false,
showToolbar: false,
numberCell: false,
minWidth: 200,
oddRowsHighlight: true,
columnBorders: false,
wrap: false,
hoverMode: 'none',
virtualX: true,
virtualY: true,
editModel: { clicksToEdit: 1 }
height: 'flex',
selectionModel: { type: 'row' },
showTop: true,
freezeRows: 1,
showToolbar: true,
scrollModel: { autoFit: true },
showBottom: true,
editable: true,
editModel: {
saveKey: $.ui.keyCode.ENTER,
keyUpDown: false,
cellBorderWidth: 0
},
change: function (evt, ui) {
if (ui.source == 'edit') {
//Call API to save values and reload.
}
},
beforeSort: function (evt, ui) {
var freezeRows = this.option("freezeRows"),
dataGrid = this.option("dataModel.data");
frozenRows = dataGrid.splice(0, freezeRows);
},
sort: function (evt, ui) {
var dataGrid = this.option("dataModel.data");
Array.prototype.unshift.apply(dataGrid, frozenRows);
}
}
