Messages

1

Help for ParamQuery Grid (free version) / Calling addRow when only one row is in the grid causes strange behaviour

« on: February 19, 2016, 12:46:21 am »

Hi, first of all, thanks for all the help I've got from you. Now I have the following problem:

I've a grid which uses a custom editor property (to manage a dropdown in one of the columns). When I call "addRow" and when ther's only one row in the grid, the new grid gets rendered as the first row, overwriting the rendering of the original first row. This doesn't happen when I call "addRow" on a grid with 2 or more rows: It gets rendered at the end of all rows in the page.

I fill the grid with the following method (beware there are embedded c# code tags in between):

Code: [Select]

function cargarGrillaAcciones() {
var idMenu = 0;

<% if (ArbolMenu.SelectedNode != null && !ArbolMenu.SelectedNode.Value.Equals("0")) 
{%>
idMenu = <%=ArbolMenu.SelectedNode.Value%>;
if ($("#hdnIsNuevo").val() == "0") $("#btnAceptarGrilla").show();
var ajaxObj = {
dataType: "json",
contentType: "application/json; charset=utf-8",//for ASP.NET
type: "POST",
async: false,
beforeSend: function (jqXHR, settings) {
grid.pqGrid("showLoading");
}
};

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 = { IdMenu: <%=ArbolMenu.SelectedNode == null ? "0" : ArbolMenu.SelectedNode.Value%>, IdAccion: 0, GlsAccion: "", GlsUriAccion : "" }; //empty row
alert("New.idMenu:"+rowData.IdMenu+", new.IdAccion:"+rowData.IdAccion+", new.GlsAccion:"+rowData.GlsAccion+", new.GlsUriAccion:"+rowData.GlsUriAccion);
var rowIndx = grid.pqGrid("addRow", { rowData: rowData, checkEditable: true });
grid.pqGrid("goToPage", { rowIndx: rowIndx });
grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
]
},
/*
{
type: 'button', icon: '', label: 'Aceptar', style: 'margin:0px 5px;', listeners: [
{
"click": function (evt, ui) {
acceptChanges();
}
}
]
},*/
{
type: 'button', icon: 'ui-icon-cancel', label: 'Deshacer', listeners: [
{
"click": function (evt, ui) {
grid.pqGrid("rollback");
deshacerBorrar();
}
}
]
}
]
},
scrollModel: {
autoFit: true
},
selectionModel: { type: 'cell', mode: 'block' },
editor: {
select: true
},
trackModel: { on: true },
hoverMode: 'cell',
editModel: {
saveKey: $.ui.keyCode.ENTER
},
cellSelect: cellSelect = function (evt, ui) {
if (ui.rowData) {
var rowIndx = ui.rowIndx,
colIndx = ui.colIndx,
dataIndx = ui.dataIndx,
cellData = ui.rowData[dataIndx];
currentRowIndex = rowIndx;
/*
var $td = grid.pqGrid( "getCell", { rowIndx: rowIndx, dataIndx: dataIndx } );
$td.delegate("select", "focus", function() {
alert("delegate select<"+$(this).attr("name")+">");
$(this).find("option").removeAttr("selected");
$(this).find("option[value='"+ui.rowData["IdTipoAccion"]+"']").prop("selected",true);
});
//alert("Cell selected rowIndx: " + rowIndx + ", colIndx: " + colIndx + ", dataIndx: " + dataIndx + ", value: " + cellData);
*/
}
},
title: "<b>Lista de acciones del menú</b>",
colModel: [
{ title: "Id Menu", dataType: "integer", dataIndx: "IdMenu", editable: false , hidden: true},
{ title: "Id Accion", dataType: "integer", dataIndx: "IdAccion", editable: false },
{ title: "Id Tipo Accion", dataIndx: "IdTipoAccion", hidden: true},
{
title: "Tipo Acción", width: 185, dataIndx: "GlsTipoAccion",
editor: {
type: "select",
/*,
valueIndx: "idRegistro",
labelIndx: "glsValor",                        
mapIndices: {"glsValor": "GlsTipoAccion", "idRegistro": "IdTipoAccion"},
*/
options: function(ui) {
return <asp:Literal ID="literalJsonTiposAcciones" runat='server'/>;
},
getData: function(ui) {
var clave = ui.$cell.find("select").val();
var rowData = grid.pqGrid("getRowData", {rowIndx: ui.rowIndx});
rowData["IdTipoAccion"]=clave;
//grid.pqGrid("refreshRow");
return ui.$cell.find("select option[value='"+clave+"']").text();
}
},
validations: [{ type: 'minLen', value: 1, msg: "Obligatorio"}]
},
{
title: "Acción", width: 185, dataType: "string", dataIndx: "GlsAccion",
validations: [
{ type: 'minLen', value: 1, msg: "Obligatorio" },
{ type: 'maxLen', value: 100, msg: "El largo no puede sobrepasar los 100 caracteres" }
],
editor: {
type: function (ui) {
//debugger;
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
width = ui.column.width,
cls = ui.cls;
var dc = $.trim(rowData[dataIndx]);

var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")
.width(width - 6)
.appendTo($cell)
.val(dc);
},
getData: function (ui) {
return $("input[name='" + ui.dataIndx + "']").val();
}
}
},
{
title: "URI Acción", width: 140, dataType: "string", dataIndx: "GlsUriAccion",
validations: [
{ type: 'minLen', value: 1, msg: "Obligatorio" },
{ type: 'maxLen', value: 100, msg: "El largo no puede sobrepasar los 100 caracteres" }
],
editor: {
type: function (ui) {
//debugger;
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
width = ui.column.width,
cls = ui.cls;
var dc = $.trim(rowData[dataIndx]);

var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")
.width(width - 6)
.appendTo($cell)
.val(dc);
},
getData: function (ui) {
return $("input[name='" + ui.dataIndx + "']").val();
}
}
},
{ title: "", editable: false, minWidth: 83, sortable: false, render: function (ui) {
return "<button type='button' class='delete_btn'>Borrar</button>";
}
}
],
pageModel: { type: "local", rPP: 11, rPPOptions: [10, 20, 50, 100] },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "IdAccion",
url: "<%=ResolveUrl("~/json/AccionJson.aspx?idMenu=")+ArbolMenu.SelectedValue%>", //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);
if (!isValid.valid) {
evt.preventDefault();
return false;
}
}
};
<%}
if (hdnIsNuevo.Value.Equals("0") && ArbolMenu.SelectedNode != null && ArbolMenu.SelectedNode.Parent != null) {
%>
grid.pqGrid(obj);
var locale = "es";
grid.pqGrid("option", $.paramquery.pqGrid.regional[locale]);           
grid.find(".pq-pager").pqPager("option", $.paramquery.pqPager.regional[locale]);
$("div").delegate("select","focus", function() {
var rowData = grid.pqGrid( "getRowData", {rowIndx: currentRowIndex});
//alert(rowData["IdTipoAccion"]);
$(this).find("option").prop("selected", false);
$(this).find("option[value='"+rowData["IdTipoAccion"]+"']").prop("selected", true);
});
<%
}
%>
}

What could be the source of this strange behaviour?
I hope you can enlighten me.

Greets and thanks in advance.

2

Help for ParamQuery Grid (free version) / Horizontal scroll makes the screen "jump"

« on: January 28, 2016, 07:38:30 pm »

Hi again. Now I've a different problem. I was using a grid that has many columns and horizontal scrolling, but for some reason, when scrolling the contents the window jumps to a different position (somewhere above the grid), like it focuses something else.

The row height is the same for every row and the data fits ok in the cell space (it supports 2 lines).

I've used a combination of these properties:

Code: [Select]

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,

and I used this css property to set the row height

Code: [Select]

tr.pq-grid-row > td {color: #333 !important; min-height: 32px !important;}

If you can help me with this problem I'd really appreciate it.
Thanks in advance.

Greets!

3

Help for ParamQuery Grid (free version) / Changing global row height?

« on: January 28, 2016, 06:09:15 pm »

Hi. First of all, thanks for all the help you have given to me.

As usual, I've another question but now is whether it's a supported feature or not (or if there's a workaround) for the 2.0.4 version of the grid.

I'd like to know if you can change the row height or make the rows evenly spaces when setting the grid height.

I hope you can help me with this.
Thanks in advance.

Greets!

EDIT: Don't mind, I figured it out. I modified the css which holds the value for the tr.pq-grid-row style.

4

Help for ParamQuery Grid (free version) / Initial value of dropdown list in "select" editor

« on: January 25, 2016, 09:33:42 pm »

Hi, I'd like to know based on a stored value (read from a json source) how can I set the initial value of a dropdownlist in a "select" type editor

I mean, you have a stored value and as soon as I click the cell to make the dropdown appear I'd like it to be selected with the element with the value that it's stored instead of the first element of the dropdown. The "key" column is "IdTipoAccion" and the "value" column is "GlsTipoAccion". If I select something on the dropdown editor it should change the "IdTipoAccion" value in that row. When I just click the "GlsTipoAccion" column in a row it should paint a dropdown with the "IdTipoAccion" value selected (not the first one always).

I know there's the init callback for the editor, but it doesn't even get fired. I couldn't do it in the getData callback since I'm using that to get the value chosen by the user to modify another cell in the same row, so setting the initial value there would break my selected value logic.

Here's a snippet of the grid I'm using (forget about the asp Literal tags, they're properly replaced by javascript arrays)

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 = { IdMenu: <%=ArbolMenu.SelectedNode == null ? "0" : ArbolMenu.SelectedNode.Value%>, IdAccion: 0, GlsAccion: "", GlsUriAccion : "" }; //empty row
var rowIndx = grid.pqGrid("addRow", { rowData: rowData, checkEditable: true });
grid.pqGrid("goToPage", { rowIndx: rowIndx });
grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
]
},
{
type: 'button', icon: 'ui-icon-cancel', label: 'Deshacer', listeners: [
{
"click": function (evt, ui) {
grid.pqGrid("rollback");
deshacerBorrar();
}
}
]
}
]
},
scrollModel: {
autoFit: true
},
selectionModel: { type: 'cell', mode: 'block' },
editor: {
select: true
},
trackModel: { on: true },
hoverMode: 'cell',
editModel: {
saveKey: $.ui.keyCode.ENTER
},
title: "<b>Lista de acciones del menú</b>",
colModel: [
{ title: "Id Menu", dataType: "integer", dataIndx: "IdMenu", editable: false , hidden: true},
{ title: "Id Accion", dataType: "integer", dataIndx: "IdAccion", editable: false },
{ title: "Id Tipo Accion", dataIndx: "IdTipoAccion", hidden: true},
{title: "Tipo Acción", width: 185, dataIndx: "GlsTipoAccion",
editor: {
type: "select",
/*,
valueIndx: "idRegistro",
labelIndx: "glsValor",                        
mapIndices: {"glsValor": "GlsTipoAccion", "idRegistro": "IdTipoAccion"},
*/
options: function(ui) { return <asp:Literal ID="literalJsonTiposAcciones" runat='server'/>; },
getData: function(ui) {
var clave = ui.$cell.find("select").val();
var rowData = grid.pqGrid("getRowData", {rowIndx: ui.rowIndx});
rowData["IdTipoAccion"]=clave;
//grid.pqGrid("refreshRow");
return ui.$cell.find("select option[value='"+clave+"']").text();
}
},
validations: [{ type: 'minLen', value: 1, msg: "Obligatorio"}]
},
{
title: "Acción", width: 185, dataType: "string", dataIndx: "GlsAccion",
validations: [
{ type: 'minLen', value: 1, msg: "Obligatorio" },
{ type: 'maxLen', value: 100, msg: "El largo no puede sobrepasar los 100 caracteres" }
],
editor: {
type: function (ui) {
//debugger;
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
width = ui.column.width,
cls = ui.cls;
var dc = $.trim(rowData[dataIndx]);

var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")
.width(width - 6)
.appendTo($cell)
.val(dc);
},
getData: function (ui) {
return $("input[name='" + ui.dataIndx + "']").val();
}
}
},
{
title: "URI Acción", width: 140, dataType: "string", dataIndx: "GlsUriAccion",
validations: [
{ type: 'minLen', value: 1, msg: "Obligatorio" },
{ type: 'maxLen', value: 100, msg: "El largo no puede sobrepasar los 100 caracteres" }
],
editor: {
type: function (ui) {
//debugger;
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
width = ui.column.width,
cls = ui.cls;
var dc = $.trim(rowData[dataIndx]);

var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")
.width(width - 6)
.appendTo($cell)
.val(dc);
},
getData: function (ui) {
return $("input[name='" + ui.dataIndx + "']").val();
}
}
},
{ title: "", editable: false, minWidth: 83, sortable: false, render: function (ui) {
return "<button type='button' class='delete_btn'>Borrar</button>";
}
}
],
pageModel: { type: "local", rPP: 11, rPPOptions: [10, 20, 50, 100] },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "IdAccion",
url: "<%=ResolveUrl("~/json/AccionJson.aspx?idMenu=")+ArbolMenu.SelectedValue%>", //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);
if (!isValid.valid) {
evt.preventDefault();
return false;
}
}
};
grid.pqGrid(obj);


I hope it's not so hard to understand the problem.
Thanks in advance!

Greets!

5

Help for ParamQuery Grid (free version) / Error 500 when invoking pqGrid("exportExcel"...

« on: January 15, 2016, 08:48:51 pm »

Hi, I've been struggling trying to solve a problem when implementing the Excel export button as shown in the paramquery grid examples. The code I've is the following:

Code: [Select]

    $(function () {

        var colModel = [
            { title: "ID Registro", dataIndx: "IdRegistro", width: 100 },
            { title: "Categoria", width: 180, dataIndx: "GlsSiglaCategoria" },
            { title: "Valor", width: 140, dataIndx: "GlsValor" }
];
        var dataModel = {
            recIndx: "IdRegistro",
            location: "remote",
            sorting: "local",           
            dataType: "JSON",
            method: "GET",
            sortIndx: "GlsSiglaCategoria",
            sortDir: "up",
            url: "json/GeneralTiposJson.aspx"
            , getData: function (dataJSON) {
                return { data: dataJSON };
            }
        }
        var newObj = {
            flexHeight: true,
            flexWidth: true,
            dataModel: dataModel,
            showTitle: false,           
            showBottom: true,           
            toolbar: {
                //cls: 'pq-toolbar-export',
                items: [{
                        type: 'button',
                        label: "Export to Excel",
                        icon: 'ui-icon-document',
                        listeners: [{
                            "click": function (evt) {
                                $("#grid_export").pqGrid("exportExcel", { url: "json/crud/GrillaCRUDJson.aspx", sheetName: "pqGrid sheet" });
                            }
                        }]
                }]
            },
            pageModel: {type:'local'},
            colModel: colModel,
            selectionModel: { mode: 'single' },
            editable: true,
            scrollModel: { horizontal: false },
            title: "Contact Details"
        };
        var $grid = $("#grid_export").pqGrid(newObj);
    });

This is the json data:

Code: [Select]

[{"IdRegistro":1,"GlsSiglaCategoria":"Tipo Dato Parametro","GlsValor":"Entero 32 bits"},{"IdRegistro":2,"GlsSiglaCategoria":"Tipo Dato Parametro","GlsValor":"Entero 64 bits"},{"IdRegistro":3,"GlsSiglaCategoria":"Tipo Dato Parametro","GlsValor":"Texto"},{"IdRegistro":4,"GlsSiglaCategoria":"Tipo Dato Parametro","GlsValor":"Decimal"},{"IdRegistro":5,"GlsSiglaCategoria":"Tipo Dato Parametro","GlsValor":"Fecha"},{"IdRegistro":6,"GlsSiglaCategoria":"Tipo Dato Columna Grilla","GlsValor":"Entero 32 bits"},{"IdRegistro":7,"GlsSiglaCategoria":"Tipo Dato Columna Grilla","GlsValor":"Entero 64 bits"},{"IdRegistro":8,"GlsSiglaCategoria":"Tipo Dato Columna Grilla","GlsValor":"Texto"},{"IdRegistro":9,"GlsSiglaCategoria":"Tipo Dato Columna Grilla","GlsValor":"Decimal"},{"IdRegistro":10,"GlsSiglaCategoria":"Tipo Dato Columna Grilla","GlsValor":"Fecha"},{"IdRegistro":11,"GlsSiglaCategoria":"Tipo Permiso","GlsValor":"Menu"},{"IdRegistro":12,"GlsSiglaCategoria":"Tipo Permiso","GlsValor":"Columna de Grilla"},{"IdRegistro":13,"GlsSiglaCategoria":"Tipo Dato Parametro","GlsValor":"Booleano"},{"IdRegistro":14,"GlsSiglaCategoria":"Tipo Dato Columna Grilla","GlsValor":"Booleano"}]

The thing is that the "json/crud/GrillaCRUDJson.aspx" file exists in that path and it just has a reference to Request.Params. I've put a breakpoint in the code behind of that page (GrillaCRUDJson.aspx.cs in the Page_load event) but it doesn't even get called. IDK what could be happening since there's no feedback of the error.

Does the pqGrid("exportExcel"... expect some particular URL? Some obscure GET or POST parameters?.

I hope you can let me a hand on this!
Help is really appreciated.

Thanks in advance!

6

Help for ParamQuery Pro / Re: Localization not working

« on: December 31, 2015, 07:00:47 pm »

Thanks, it worked!

Greets!

7

Help for ParamQuery Pro / Localization not working

« on: December 30, 2015, 08:06:33 pm »

Hi, I was testing localization with paramquery grid and I tried the example posted here.

I've modified that code to show an example with no rows:

Code: [Select]


    $(function () {
        var colModel = [
{ title: "Title", dataType: "string", width: "150", dataIndx: 1 },
{ title: "Rights", dataType: "string", width: 150, dataIndx: 2 },
        { title: "Price", dataType: "float", width: 70, dataIndx: 3, align:"right", render:function(ui){
            var rowData=ui.rowData, cV=rowData[3];           
            return "$"+cV;
        } },
{ title: "Content", width: 320, dataIndx: 4 },
        { title: "Artist", dataType: "string", width: 120, dataIndx: 0 }
];

        var dataModel = {
            cache: true,
            location: "remote",           
            sortDir: "down",
            sorting: "local",                   
            dataType: "xml",
            getUrl: function () {
                return { url: "/Content/apple-albums.xml" };
            },
            getData: function (dataDoc) {
                //debugger;
                $(dataDoc).find("price").each(function(i,pNode){
                    var txt=$(pNode).text();
                    txt=txt.replace("$","");
                    $(pNode).text(txt);                   
                });
                var obj = { itemParent: "entry", itemNames: ["artist", "title", "rights", "price", "content" ] };
                return { data: [] }; //$.paramquery.xmlToArray(dataDoc, obj)
            }
        };
        var obj={
            width: 700,             
            dataModel: dataModel,
            colModel: colModel,           
            title: "<b>Albums Feed Reader</b>",
            flexHeight: true,
            flexWidth: true,           
            pageModel: {type:'local', rPP: 1, rPPOptions: [1, 2, 5, 10, 20, 100] },
            draggable: true
        };
       
        var $grid=$("div#grid-localize").pqGrid(obj);             

        $("#select-locale").change(function(evt){
            var locale=$(this).val();           
alert($.paramquery.pqGrid.regional[locale].strNoRows);
            $grid.pqGrid("option", $.paramquery.pqGrid.regional[locale]);           
            $grid.find(".pq-pager").pqPager("option", $.paramquery.pqPager.regional[locale]);           
        });
    });   

As it can be seen, I've modified the data in the dataModel to read an empty array ([]) and pressed "Edit and run". When I change the locale, it doesn't change the "no rows" string, despite having that set with the line:

Code: [Select]

$grid.pqGrid("option", $.paramquery.pqGrid.regional[locale]);   I put an alert to see if the locale was getting read and the variable was correctly set. Despite all that, the string doesn't change and it remains with the default value ("No rows to display").

Am I missing something?
I hope you can help me sort this out!

Thanks in advance!
Greets!

8

Help for ParamQuery Grid (free version) / Re: Can't make track to work in my grid

« on: December 16, 2015, 09:10:38 pm »

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.

9

Help for ParamQuery Grid (free version) / Re: Can't make track to work in my grid

« on: December 15, 2015, 11:43:36 pm »

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!

10

Help for ParamQuery Grid (free version) / Can't make track to work in my grid

« on: December 15, 2015, 09:07:55 pm »

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!