ParamQuery grid support forum
General Category => Bug Report => Topic started by: juroinstruments on July 31, 2024, 12:25:49 pm
-
Bug condition :
1. There must be enough data for scrolling
2. cls must be added dynamically - ex) editModel.addDisableCls = true
3. colModel.editable is function & function call method getChanges()
- maybe another method occurs same bug
Result :
1. If you scroll while editing, editing will end.
2. Newly rendered rows are duplicated(has same aria-rowindex).
3. Duplicated row has only first column
Example
https://paramquery.com/pro/demos/grid_jsonp
- add Grid Option
editModel : { addDisableCls : true }
- add Option for ColModel Column
editable: function (ui) {
this.getChanges();
return true;
}
full Javascript
/*
$(function () {
var colModel= [
{ title: "Product ID", dataType: "integer", dataIndx: "ProductID", editable: false, width: 80, editable: function (ui) {
this.getChanges()
return true;
}
},
{ title: "Product Name", width: 165, dataType: "string", dataIndx: "ProductName" },
{ title: "Quantity Per Unit", width: 140, dataType: "string", align: "right", dataIndx: "QuantityPerUnit" },
{ title: "Unit Price", width: 100, dataType: "float", align: "right", dataIndx: "UnitPrice" },
{ title: "Units In Stock", width: 100, dataType: "integer", align: "right", dataIndx: "UnitsInStock" },
{ title: "Discontinued", width: 100, dataType: "bool", align: "center", dataIndx: "Discontinued" }
];
var dataModel = {
location: "remote",
dataType: "jsonp",
method: "GET",
url: "/pro/products/get_jsonp"
//url: "/pro/products.php",//for PHP
};
$("#grid_jsonp").pqGrid({
height: 450,
scrollModel: {autoFit: true},
dataModel: dataModel,
colModel: colModel,
numberCell: { resizable: true, width: 30, title: "#" },
title: "Products",
resizable: true,
editModel : { addDisableCls : true }
});
});
*/
Result
real Row
<div class="pq-grid-row pq-striped" role="row" id="pq-body-row-u5-18-right" aria-rowindex="19" style="top:486px;height:27px;width:100%;"><div class="pq-grid-cell pq-align-right" role="gridcell" id="pq-body-cell-u5-18-0-right" style="left: 30px; width: 206px; height: 27px;"><div>31</div></div><div class="pq-grid-cell" role="gridcell" id="pq-body-cell-u5-18-1-right" style="left: 236px; width: 291px; height: 27px;"><div>Gorgonzola Telino</div></div><div class="pq-grid-cell pq-align-right" role="gridcell" id="pq-body-cell-u5-18-2-right" style="left: 527px; width: 265px; height: 27px;"><div>12 - 100 g pkgs</div></div><div class="pq-grid-cell pq-align-right" role="gridcell" id="pq-body-cell-u5-18-3-right" style="left: 792px; width: 226px; height: 27px;"><div>12.5</div></div><div class="pq-grid-cell pq-align-right" role="gridcell" id="pq-body-cell-u5-18-4-right" style="left: 1018px; width: 225px; height: 27px;"><div>0</div></div><div class="pq-grid-cell pq-align-center" role="gridcell" id="pq-body-cell-u5-18-5-right" style="left: 1243px; width: 226px; height: 27px;"><div>false</div></div></div>
duplicated row
<div class="pq-grid-row pq-striped" role="row" id="pq-body-row-u5-18-right" aria-rowindex="19" style="top:486px;height:27px;width:100%;"><div class="pq-grid-cell pq-align-right" role="gridcell" id="pq-body-cell-u5-18-0-right" style="left:30px;width:206px;height:27px;"><div>31</div></div></div>
-
column.editable callback is used to decide editability of cells in a column.
It's incorrect to place this.getChanges() inside the callback.
-
I need to check if row is added or modified or normal
The example has been deleted except for the parts that cause bugs.
Besides the type of editable is boolean or function. And isn't it enough to just return a boolean through the function?
-
Modified row can be checked with grid.isDirty({rowIndx: rowIndx}) method:
Reference: https://paramquery.com/pro/api#method-isDirty
New row can be checked by existence of record id.
-
ok. I will edit it the way you suggested. thx