CODEWITHSUNDEEP
jquerycssjqgrid
UdayKiran Pulipati
UdayKiran Pulipati

Reputation: 6667

How to align center search popup in jqgrid

I have a problem to align center Search popup in jqgrid. When I click on search button in jqgrid the Search popup is displayed in starting of the grid.

$(document).ready(function(){
            //jqGrid
            $("#usersList").jqGrid({
                url:'<%=request.getContextPath() %>/getUsersList',
                datatype: "json",               
                colNames:['Edit','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number'],
                colModel:[
                    {name:'userId',search:false,index:'userId',width:30,sortable: false},                       
                    {name:'email',index:'user.primaryEmail',width:150},
                    {name:'isActive',index:'user.isActive',width:80},
                    {name:'firstName',index:'firstName', width:100},
                    {name:'middleName',index:'middleName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'mobileNo',index:'user.mobileNo', width:100},
                    ],
                    rowNum:20,
                    rowList:[10,20,30,40,50],
                    rownumbers: true,  
                    pager: '#pagerDiv',
                    sortname: 'user.primaryEmail',  
                    viewrecords: true,  
                    sortorder: "asc",
                    autowidth:'true',
            });
            $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
            $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
            $('#load_usersList').width("130");
            $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
            $(".inline").colorbox({inline:true, width:"20%"});
        });

Upvotes: 0

Views: 2892

Answers (2)

UdayKiran Pulipati
UdayKiran Pulipati

Reputation: 6667

Updated .ui-jqdialog class in ui.jqgrid.css file.

jqgrid search popup is align center by adding css attributes left: 30% !important; top: 40% !important; in .ui-jqdialog class

.ui-jqdialog {
    display: none;
    width: 300px;
    position: absolute;
    padding: .2em;
    font-size: 11px;
    overflow: visible;
    left: 30% !important;
    top: 40% !important;
}

Upvotes: 2

DarkRay
DarkRay

Reputation: 24

$("#usersList").jqGrid('navGrid','#pagerDiv',
{edit:false,add:false,del:false}, // globals
{}, // edit options
{}, // add options
{}, // del options
{closeAfterSearch:true,beforeShowForm:test,onClose:test2}, // search options
{} // view options
);

test = function (){
$( "#editmodlist" ).position({my:"center",at: "center",of: "#gbox_usersList"});
}
test2 = function (){
$("#editmodlist").attr({style:"width: auto; height: auto; z-index: 950; overflow: hidden; top: 4px; left: 4px; display: block;"})
}

Upvotes: 1

Related Questions