tengo un problema en mi jqgrid, estoy tratando de alinear el modal del search, yo logro centrar el adicionar, editar, eliminar, el view e inclusive hasta los info_dialog, pero el search no lo logro. Alguien me puede ayudar?? Importante es que mi search es modal, no es en barra y además yo creo variables con botones para adionar,editar, etc. He buscado en internet, pero no logro encontrar una solucion sobre todo teniendo en cuenta la forma en que tengo implementado el jqgrid. A continucacion pongo el código de mi jqgrid y una imagen de como se ve
$(document).ready(function () {
var addSettings = {
url: paramFromView.DialogAddUrl,
addCaption: "Nuevo Tipo de Cliente/Proveedor",
modal: true,
savekey: [true, 13],
closeAfterAdd: false,
closeOnEscape: true,
reloadAfterSubmit: true,
recreateForm: true,
bottominfo: paramFromView.DialogBottomInfo,
width: 350,
zIndex: 100000,
afterComplete: function (response, postdata, formid) {
var myInfo = '<div class="ui-state-highlight ui-corner-all">' +
'<span class="ui-icon ui-icon-info" ' +
'style="float: left; margin-right: .3em;"></span>' +
response.responseText +
'</div>',
$infoTr = $("#TblGrid_" + $.jgrid.jqID(this.id) + ">tbody>tr.tinfo"),
$infoTd = $infoTr.children("td.topinfo");
$infoTd.html(myInfo);
$infoTr.show();
setTimeout(function () {
$infoTr.slideUp("slow");
}, 6000);
return [true, "", ""];
}
};
var viewSettings = {
caption: "Datos del tipo de Cliente/Proveedor",
modal: true,
closeOnEscape: true,
zIndex: 100000,
width: 450
};
var searchSettings = {
multipleSearch: true,
modal: true,
zIndex: 100000,
closeAfterSearch: true,
closeOnEscape: true
};
var editSettings = {
url: paramFromView.DialogEditUrl,
editCaption: "Editar tipo de Cliente/Proveedor",
modal: true,
savekey: [true, 13],
closeAfterEdit: true,
closeOnEscape: true,
recreateForm: true,
bottominfo: paramFromView.DialogBottomInfo,
zIndex: 100000,
width: 350,
onClose: function () {
$("#_TipoCPGrid").trigger('reloadGrid');
},
afterSubmit: function (response) {
$.jgrid.info_dialog.call(this, "Información", response.responseText);
Centrar(this);
return [true, "", ""];
}
};
var delSettings = {
url: paramFromView.DialogDeleteUrl,
caption: "Eliminar tipo de Cliente/Proveedor",
msg: "¿Seguro desea eliminar el tipo de Cliente/Proveedor seleccionado?",
modal: true,
closeAfterDelete: true,
closeOnEscape: true,
width: 440,
onClose: function () {
$("#_TipoCPGrid").trigger('reloadGrid');
},
afterSubmit: function (response) {
$.jgrid.info_dialog.call(this, "Información", response.responseText);
Centrar(this);
return [true, "", ""];
}
};
$("#_TipoCPGrid").jqGrid(
{
colNames: ['Id', '<strong>Tipo Cliente/Proveedor</strong>'],
colModel: [
{ name: 'id', index: 'id', hidden: true, key: true },
{ name: 'tipo_cli_pro', index: 'tipo_cli_pro', sortable: true, editable: true, edittype: "text", editoptions: { maxlength: 50 }, editrules: { required: true }, formoptions: { elmsuffix: ' (*)' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc'] }, align: 'left' }],
url: paramFromView.TipoCPUrl,
editurl: paramFromView.TipoCPEditUrl,
datatype: "json",
mtype: 'GET',
rowNum: paramFromView.PageSize,
rowList: [10, 20, 50, 100],
sortname: 'id_tcli_pro',
viewrecords: true,
sortorder: "asc",
scrollOffset: 2,
caption: "Tipos de Cliente/Proveedor",
loadtext: "Cargando...",
emptyrecords: "No existen tipos de Cliente/Proveedor para mostrar",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
autowidth: true,
shrinkToFit: false,
height: 'auto',
pager: $('#_TipoCPPager'),
altRows: true,
rownumbers: true,
rownumWidth: 35,
cmTemplate: { title: false }
});
// función centrar
function Centrar(form) {
// "editmodlist"
var dlgDiv = $(".ui-jqdialog");
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
var parentTop = parentDiv.offset().top;
var parentLeft = parentDiv.offset().left;
// HINT: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
if (Math.round(parentTop + (parentHeight - dlgHeight) / 2) < 0) {
dlgDiv[0].style.top = 0 + "px";
}
else {
dlgDiv[0].style.top = Math.round(parentTop + (parentHeight - dlgHeight) / 2) + "px";
}
if (Math.round(parentLeft + (parentWidth - dlgWidth) / 2) + "px" < 0) {
dlgDiv[0].style.left = 0 + "px";
}
else {
dlgDiv[0].style.left = Math.round(parentLeft + (parentWidth - dlgWidth) / 2) + "px";
}
}
//Centrar add y edit
$.extend(true, $.jgrid.edit, {
recreateForm: true,
beforeShowForm: function (form) {
Centrar(this);
}
});
// Centrar view
$.extend(true, $.jgrid.view, {
recreateForm: true,
beforeShowForm: function (form) {
Centrar(this);
}
});
//Centrar del
$.extend(true, $.jgrid.del, {
recreateForm: true,
beforeShowForm: function (form) {
Centrar(this);
}
});
//Centrar search (NO FUNCIONA, NO SÉ PORQUE)
$.extend(true, $.jgrid.search, {
recreateForm: true,
beforeShowForm: function (form) {
Centrar(this);
}
});
$.extend(true, $.jgrid.search, {
recreateForm: true,
beforeShowForm: function (form) {
Centrar(this);
}});
//RESPONSIVE
$(window).resize(function () {
var outerwidth = $('#jqGridTipoCP').width();
$('#_TipoCPGrid').setGridWidth(outerwidth); // setGridWidth method sets a new width to the grid dynamically
});
var outerwidth = $('#jqGridTipoCP').width();
$('#_TipoCPGrid').setGridWidth(outerwidth);
$("#_TipoCPGrid").jqGrid('navGrid', '#_TipoCPPager', { refresh: true, view: true, edit: true, add: true, del: true, search: true },
editSettings, addSettings, delSettings, searchSettings, viewSettings);
});