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):
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.
