tengo un grid, concretamente un jqgrid, que al cargar la página, accede a la base de datos y carga los datos sin ningún problema. En la cabecera del jqgrid he puesto un textbox y un button para poder filtrar los registros del grid, y es ahí donde tengo el problema. La llamada al WebMethod la hace bien, la consulta en la base de datos también, pero no actualiza los registros en el jqgrid, se siguien viendo todos exactamente igual que antes de aplicar los filtros.
El código JavaScript es el siguiente:
<script type="text/javascript">
var $table = $('#grid');
var lastSel;
var colMode = [];
jQuery(document).ready(function () {
$.ajax({
dataType: "json",
type: "post",
url: "Webservices/LoadColumns.asmx/GetColumnsItems",
data: "{}",
contentType: "application/json;",
async: false, //esto es requerido, de otra forma el jqgrid se cargaria antes que el grid
success: function (data) {
var persons = JSON.parse(data.d);
$.each(persons, function (index, persona) {
colMode.push({ name: persona.Name, index: persona.index,label: persona.label, width: persona.width, align: persona.align, editable: persona.editable, edittype: persona.editType, editrules: { edithidden: true }, hidden: false });
})
}
}),
$("#grid").jqGrid(
{
datatype: function () {
$.ajax(
{
url: "Webservices/LoadData.asmx/GetItems", //PageMethod
data: "{'pPageSize':'" + $('#grid').getGridParam("rowNum") +
"','pCurrentPage':'" + $('#grid').getGridParam("page") +
"','pSortColumn':'" + $('#grid').getGridParam("sortname") +
"','pSortOrder':'" + $('#grid').getGridParam("sortorder") + "'}",
dataType: "json",
type: "post",
contentType: "application/json; charset=utf-8",
complete: function (jsondata, stat) {
if (stat == "success")
jQuery("#grid")[0].addJSONData(JSON.parse(jsondata.responseText).d);
else
alert(JSON.parse(jsondata.responseText).Message);
}
});
},
jsonReader: //Set the jsonReader to the JQGridJSonResponse squema to bind the data.
{
root: "Items",
page: "CurrentPage",
total: "PageCount",
records: "RecordCount",
repeatitems: true,
cell: "Row",
id: "ID" //index of the column with the PK in it
},
colModel: colMode,
pager: "#pager", //Pager.
loadtext: 'Cargando datos...',
recordtext: "{0} - {1} de {2} elementos",
emptyrecords: 'No hay resultados',
pgtext: 'Pág: {0} de {1}', //Paging input control text format.
rowNum: "10", // PageSize.
rowList: [10, 20, 30], //Variable PageSize DropDownList.
viewrecords: true, //Show the RecordCount in the pager.
multiselect: true,
sortname: "ItemId", //Default SortColumn
sortorder: "asc", //Default SortOrder.
width: "800",
height: "230",
caption: 'ARTÍCULOS - Buscar: <input type="text" id="CtrlSearch" placeholder="Buscar" results="0" class="gridsearch" /> Por: <select id="CtrlSearchBy" name="CtrlSearchBy"><option>ID</option><option>Código</option><option>Nombre</option><option>Familia</option></select> <input id="CmdSearch" type="button" value="Buscar" style="width: 100px; height: 24px;" title="Buscar" onclick="return SearchItems();" />',
ondblClickRow: function(rowid) {
$(this).jqGrid('editGridRow', rowid, {height:275,reloadAfterSubmit:false,closeAfterEdit:true,closeOnEscape:true});
}
}).navGrid("#pager", { edit: false, add: false, search: false, del: false },
{ url: "Webservices/ProcessData.asmx/EditDataItem", closeAfterEdit: true },
{ url: "Webservices/ProcessData.asmx/EditDataItem", closeAfterAdd: true },
{ url: "Webservices/ProcessData.asmx/DeleteDataItem" });
jQuery.extend(jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function (postData) {
return JSON.stringify(postData);
}
});
jQuery.extend(jQuery.jgrid.del, {
ajaxDelOptions: { contentType: "application/json" },
serializeDelData: function (postData) {
return JSON.stringify(postData);
}
});
});
function SearchItems() {
var ob = document.getElementById("CtrlSearchBy");
var iColumn = ob.options[ob.selectedIndex].value;
var ifilter = document.getElementById("CtrlSearch").value;
var searchString = ifilter.toUpperCase();
$.ajax({
type: "post",
url: "Webservices/SearchData.asmx/SearchItems",
data: "{'pPageSize':'" + $('#grid').getGridParam("rowNum") +
"','pCurrentPage':'" + $('#grid').getGridParam("page") +
"','pSortColumn':'" + $('#grid').getGridParam("sortname") +
"','pSortOrder':'" + $('#grid').getGridParam("sortorder") +
"','pSearchField':'" + iColumn +
"','pSearchString':'" + searchString + "'}", //PageMethod Parametros de entrada
contentType: "application/json; charset=utf-8",
dataType: "json",
viewrecords: true,
sortorder: "asc",
caption: "Report",
hidegrid: false,
autowidth: true,
height: "100%",
loadonce: false
}).trigger("reloadGrid", [{ current: true}]);
//$("#grid").jqGrid("setGridParam", { datatype: "json" })
//jQuery(grid).trigger("reloadGrid");
//$('#grid').trigger('reloadGrid');
//jQuery('#grid').trigger('reloadGrid');
//$("#grid").setGridParam({ page: 1 }).trigger("reloadGrid");
//$("#grid").trigger("reloadGrid", [{ page: 1}]);
}
</script>
He probado varias formas de utilizar el reloadGrid, pero no hay manera, no sé dónde puede estar el error. Agradecería la ayuda, ya que llevo varios días peleando con esto y no hay forma de conseguir que refresque los datos del grid.
Saludos y muchas gracias!!!
