I'm adding a jqGrid table in my page, where I need to add registers, after I do some processing I need to reload de data, all is local, no server communication, this is my code:
$(function () {
$.extend(true, $.jgrid.inlineEdit, {
beforeCancelRow: function (options, rowid) {
$(this).jqGrid('saveRow', rowid);
$(this).setCell(rowid, 'TipoEtiqueta', '', '', { 'title': null });
return false;
}
});
L_Grid.jqGrid({
loadonce: false,
data: notas,
datatype: "local",
refresh: true,
colNames: ['Código Etiqueta', 'Tiempo (hh:mm:ss)', 'Descripción', 'Privada', 'Eliminar'],
colModel: [
{
name: 'Codigo', index: 'Codigo', hidden: true, search: false
},
{
name: 'TiempoMilisegundos', index: 'TiempoMilisegundos', align: "center", search: false,
formatter: function (cellvalue, options, rowObject) {
return TimeFormat(cellvalue)
},
cellattr: function (rowId, val) {
return 'aria-label="Tiempo de la etiqueta ' + TimeFormat(val) + '" title="Tiempo de la etiqueta" onclick="navegarEtiqueta(' + val + ')" tabindex="0"';
}
},
{
name: 'Descripcion', index: 'Descripcion', align: "center", width: 320, editable: true, editoptions: { required: false, maxlength: 255, "class": "descripcion-etiqueta", list: "etiquetasPredefinidas" }, classes: "descripcion-etiqueta",
cellattr: function (rowId, val) {
return 'tabindex="0"';
}
},
{
name: 'TipoEtiqueta', index: 'TipoEtiqueta', align: "center", search: false, editable: true,
formatter: function (cellvalue, options, rowObject) {
var titulo = cellvalue ? "Privada": "Pública";
return ' <label class="switch" title="' + titulo +'">'
+ ' <input tabindex="0" type="checkbox" ' + ValidarCheck(cellvalue) + ' aria-disabled="true" disabled aria-label="Indicador de etiqueta privada" role="switch">'
+ ' <span class="slider round" tabindex="0" aria-label="Indicador de etiqueta privada ' + TipoEtiqueta(cellvalue) + '"></span>'
+ ' </label>';
},
edittype: 'custom',
editoptions: {
custom_element: function (value, options) {
var V_Localdata = L_Grid.jqGrid('getGridParam', 'data');
var V_RowData = V_Localdata[L_Grid.jqGrid('getGridParam', '_index')[options.rowId]];
return $('<label class="switch">'
+ ' <input tabindex="0" type="checkbox" ' + ValidarCheck(V_RowData.TipoEtiqueta) + ' aria-label="Indicador de etiqueta privada" role="switch">'
+ ' <span class="slider round"></span>'
+ '</label>');
},
custom_value: function (elem, operation, value) {
if (operation === 'get') {
return $(elem).find("input[type='checkbox']").is(':checked');
} else if (operation === 'set') {
$("input[type='checkbox']", elem).val(value);
}
}
}
},
{
name: "act", align: "center", search: false,
formatter: function (cellvalue, options, rowObject) {
return '<span onClick="eliminarEtiqueta.call(this)" contenteditable="false"><button type="button" class="btn btn-sm my-0 icono-borrar" aria-label="Eliminar etiqueta" title="Eliminar etiqueta" /></span>';
}
}
],
onSelectRow: function (rowid, status, e) {
var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
$self.jqGrid('saveRow', savedRow[0].id);
$self.setCell(savedRow[0].id, 'TipoEtiqueta', '', '', { 'title': null });
}
lastsel = rowid;
},
guiStyle: "bootstrap4",
autowidth: true,
shrinkToFit: true,
height: 'auto',
autoResizing: { compact: true },
responsive: true,
rownumbers: false,
sortorder: "desc",
altRows: true,
ignoreCase: true,
loadComplete: function (data) {
$('#numerRegistros').html(L_Grid.getGridParam("records"));
},
});
// cambia el tamaño del grid dinámicamente
$(window).bind("resize", function () {
L_Grid.jqGrid("setGridWidth", L_Grid.closest(".container").width());
}).triggerHandler("resize");
$("#txtBusqueda").on("input", function () {
var savedRow = L_Grid.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0) {
L_Grid.jqGrid('saveRow', savedRow[0].id);
L_Grid.setCell(savedRow[0].id, 'TipoEtiqueta', '', '', { 'title': null });
}
var postData = L_Grid.jqGrid("getGridParam", "postData"),
colModel = L_Grid.jqGrid("getGridParam", "colModel"),
rules = [],
searchText = $(this).val(),
l = colModel.length,
i,
cm;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
postData.filters = JSON.stringify({
groupOp: "OR",
rules: rules
});
L_Grid.jqGrid("setGridParam", { search: true });
L_Grid.trigger("reloadGrid", [{ page: 1, current: true }]);
return false;
});
L_Grid.jqGrid('bindKeys', {
onEnter: function (rowid) {
L_Grid.jqGrid('editRow', rowid, true, null, null, null, {}, function () {
setTimeout(function () {
L_Grid.focus();
}, 100);
});
}
});
});
function ReloadNotsGrid(nots) {
L_Grid.jqGrid('setGridParam',
{
datatype: 'local',
data: nots
})
.trigger("reloadGrid");}
When I call ReloadNotsGrid I get this exception on Edges:
jquery.jqgrid.min.js 0x800a13b5 - JavaScript runtime error: Assignment to read-only properties is not allowed in strict mode
I found the solution, I was sending the data 'raw' as string, I needed to do jQuery.parseJSON (notes), but the exception that I was getting was a little misleading. And other rare thing was that I only get this exception in MS Edges (Microsoft EdgeHTML 18.18363, Microsoft Edge 44.18362.449.0), in chrome (Version 81.0.4044.138 (Official Build) (64-bit)) it works well.
The code end up looking like this:
function ReloadNotsGrid(nots) {
var dataToLoad = jQuery.parseJSON(nots);
L_Grid.jqGrid('setGridParam',
{
datatype: 'local',
data: dataToLoad
})
.trigger("reloadGrid");
}