Can't make track to work in my grid

[inafking]

Hi, sorry if my first post is a question. I've this kind of grid:

Code: [Select]

var obj = {
width: contentWidth,
height: 500,
wrap: false,
hwrap: false,
resizable: true,
rowBorders: false,
numberCell: { show: false },
track: true, //to turn on the track changes.
flexHeight: true,
toolbar: {
items: [
{
type: 'button', icon: 'ui-icon-plus', label: 'Nuevo Registro', listeners: [
{
"click": function (evt, ui) {
//append empty row at the end.                           
var rowData = { IsNuevo: true,  GlsSiglaCategoria: "", GlsDescripcion: "" };
var rowIndx = grid.pqGrid("addRow", { rowData: rowData, checkEditable: true });
grid.pqGrid("goToPage", { rowIndx: rowIndx });
grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
]
},
{
type: 'button', icon: 'ui-icon-disk', label: 'Aceptar Cambios', style: 'margin:0px 5px;', listeners: [
{
"click": function (evt, ui) {
acceptChanges();
}
}
]
},
{
type: 'button', icon: 'ui-icon-cancel', label: 'Rechaza Cambios', listeners: [
{
"click": function (evt, ui) {
grid.pqGrid("rollback");
var arrFilasBorradas = grid.pqGrid( "getRowsByClass", { cls : 'pq-row-delete' } )
var i;
if (typeof arrFilasBorradas !== "undefined" && arrFilasBorradas != null && arrFilasBorradas.length > 0) {
for(i=0;i<arrFilasBorradas.length;i++) {
grid.pqGrid("removeClass", { rowIndx: arrFilasBorradas[i].rowIndx, cls: 'pq-row-delete' });
}
}
}
}
]
}
]
},
scrollModel: {
autoFit: true
},
selectionModel: {
type: ''
},
editor: {
select: true
},
trackModel: { on: true },
hoverMode: 'cell',
editModel: {
saveKey: $.ui.keyCode.ENTER
},
title: "<b>Lista de categorías de tipos</b>",

colModel: [
{ title: "Es Nuevo", dataType: "bool", dataIndx: "IsNuevo", editable: false , hidden: true},
{
title: "Categoría", dataType: "string", dataIndx: "GlsSiglaCategoria",
validations: [
{ type: 'minLen', value: 1, msg: "Obligatorio" },
{ type: 'maxLen', value: 50, msg: "El largo no puede sobrepasar los 50 caracteres" }
]
},
{
title: "Descripción", dataType: "string", dataIndx: "GlsDescripcion",
validations: [
{ type: 'maxLen', value: 200, msg: "El largo no puede sobrepasar los 200 caracteres" }
]
},
{ title: "", editable: false, minWidth: 83, sortable: false, render: function (ui) {
return "<button type='button' class='delete_btn'>Borrar</button>";
}
}
],
pageModel: { type: "local", rPP: 10, rPPOptions: [10, 20, 50, 100] },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "IdAccion",
url: "data.json", //for ASP.NET
getData: function (response) {
return { data: response };
}
},
//save the cell when cell loses focus.
quitEditMode: function (evt, ui) {
if (evt.keyCode != $.ui.keyCode.ESCAPE) {
grid.pqGrid("saveEditCell");
}
},
refresh: function () {
$("#grid_json").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors' } })
.unbind("click")
.bind("click", function (evt) {
var $tr = $(this).closest("tr");
var $trs = $tr.parent().children();
var obj = grid.pqGrid("getRowIndx", { $tr: $tr });
var rowIndx = obj.rowIndx;
//
$trs.removeClass("pq-grid-row");
//var ans = window.confirm("Está seguro que quiere borrar la fila " + (rowIndx + 1) + "?");
var hasClassDelete = grid.pqGrid( "hasClass",
{rowIndx: rowIndx, cls: 'pq-row-delete'}
);
if (hasClassDelete) {
grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
$tr.removeClass("pq-row-delete");
}
else {
grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
$tr.addClass("pq-row-delete");
}
});
},
cellBeforeSave: function (evt, ui) {
//var grid = $("#grid_json");
var isValid = grid.pqGrid("isValid", ui);
var dataIndx = ui.dataIndx,
isNuevo = ui.rowData["IsNuevo"];
if (!isValid.valid || (!isNuevo && dataIndx == "GlsSiglaCategoria")) {
evt.preventDefault();
return false;
}
}
};

The data that's used to feed the grid is this:

Code: [Select]

[{"IsNuevo":false,"GlsSiglaCategoria":"Tipo Dato Parametro","GlsDescripcion":"Tipos de dato de C# de parámetros de entrada en formularios"},{"IsNuevo":false,"GlsSiglaCategoria":"Tipo Dato Columna Grilla","GlsDescripcion":"Tipos de dato de c# de columnas de grillas (para mostrar y editar)"},{"IsNuevo":false,"GlsSiglaCategoria":"Tipo Permiso","GlsDescripcion":"Indica si es permiso para Menú o columna de grilla"}]

But I don't know why the grid doesn't keep track of the changes, despite having set "track: true" in the properties of the grid. I'm using paramquery 2.0.4.

The symptom is that the red triangle that shows up in the upper left corner of each cell is missing when I edit something. I have another callback function that gets the changes (acceptChanges()), but when I show the updateList contents it comes empty.

I hope you can shed some light on what could be missing.
Thanks in advance!

Greets!

[paramvir]

There is no matching dataIndx in colModel for recIndx: IdAccion ( primary key of the field ), which is required for tracking

Hope it helps!

[inafking]

Thanks a lot my friend, you really saved my day!

Now, changing the subject, usign the same grid and data when I add a row apart from the addList being filled with one element, also the updateList has en element on it, which I think is wrong since I'm just adding.

This causes a primary key error in paramquery (I saw it on the browser console), so I don't know how to keep the updateList and addList arrays consistent.

Hugs!

[paramvir]

Primary key field is usually uneditable or hidden to the end user and is generated by the server to prevent duplicate primary key error.

[inafking]

I've it uneditable but still the problem persists. It keeps adding rows to the updateList despite only adding a new row.

I've checked it in the acceptChanges method.

Greets.

[paramvir]

I don't see the mentioned issue in the demo. Please share a jsfiddle if possible.