0

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);
});
1
  • ya resolví el problema, el tema está en que no debería haber usado beforeShowForm, si no, beforeShowSearcha y la función que ponga ahí debe devolver true, por lo que mi var searchSettings me quedaría de la siguiente forma: Commented el 10 jun. 2020 a las 18:43

1 respuesta 1

0

ya resolví el problema, el tema está en que no debería haber usado beforeShowForm, si no, beforeShowSearch y la función que ponga ahí debe devolver true, por lo que mi var searchSettings me quedaría de la siguiente forma. Ojala a alguien le sirva y no pase tanto trabajo como yo.

var searchSettings = {
        multipleSearch: true,
        modal: true,
        zIndex: 100000,
        closeAfterSearch: true,
        closeOnEscape: true,
        width: $("#_CPGrid").width,
        // Centrar Search
        beforeShowSearch: function ($form) {
            var dlgDiv = $("#searchmodfbox__TipoCPGrid");
            var topAux = ($(window).height() - dlgDiv.height()) / 2 + $(window).scrollTop();
            var leftAux = ($(window).width() - dlgDiv.width()) / 2 + $(window).scrollLeft();
            dlgDiv.css("position", "absolute");
            if (topAux < 0) {
                dlgDiv.css("top", $(window).scrollTop() + "px");
            }
            else {
                dlgDiv.css("top", topAux + "px");
            }
            if (leftAux < 0) {
                dlgDiv.css("left", $(window).scrollLeft() + "px");
            }
            else {
                dlgDiv.css("left", leftAux + "px");
            }

            return true;
        }
    };

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.