Search code examples
javascriptjqueryjsonjqgrid

Close the search popup after click on find button in jqgrid

How to close search popup when click on Find button. After search the data in jqgrid I click on Find button the Search popup is not closed. The searched data is filtered but popup is not closed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <script src="<%=request.getContextPath()%>/js/jquery-1.9.1.js" type="text/javascript" ></script>
        <script src="<%=request.getContextPath()%>/js/jquery.jqGrid.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/style/colorbox.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/style/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/style/ui.jqgrid.css" />
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-validation.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.colorbox.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/grid.locale-en.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            //jqGrid
            $("#usersList").jqGrid({
                url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
                datatype: "json",               
                colNames:['Edit','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number','Cloud Url', 'Cloud User Name','Cloud Folder'],
                colModel:[
                    {name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink},                       
                    {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},
                    {name:'cloudUrl',index:'user.cloudUrl', width:200},
                    {name:'cloudUserName',index:'user.cloudUserName', width:120},
                    {name:'cloudFolderName',index:'user.cloudFolderName', width:120},
                    ],
                    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});
            $(".inline").colorbox({inline:true, width:"20%"});
        });

        function editLink(cellValue, options, rowdata, action)
        {
            return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
        }
    </script>
</head>

<body>
<div style="" class="wrapper">
    <div style="height:10px; clear:both;"></div>
    <div class="ContentHolder">
        <div class="bgcolorblack">
            <div style="clear:both;"></div>
            <div style="padding:10px;">
                <div id="gridContainer">
                    <table id="usersList"></table>
                    <div id="pagerDiv"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Solution

  • The problem is resolved after mention closeAfterSearch:true in jqgrid.

    Search popup is closed when click on Find button.

    Code:

    $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});