jQuery Grid Plugin - jqGrid

Tony, I add all the columns and now it is working.

In the meantime I think i discover a bug. When you have a selected/unselected grid, select one row and sort for any column then you lose the selected row...

Note than i am uisng a flag to hide/show the grid but when I click in the "imgOK" the grid "flashes" and dissapears as the "ghideGrid" variable is created again...

 var ghideGrid = 1;
 
  jQuery("#imgOK").click(function() {  
                var fechaDesdeString = jQuery("#txtFechaDesde").val();
                var fechaHastaString = jQuery("#txtFechaHasta").val();
                
                if (fechaDesdeString == '') {
                    alert("Debe especificar la fecha Desde");
                    return false;
                }
                
                if (fechaHastaString == '') {
                    alert("Debe especificar la fecha Hasta");
                    return false;
                }
                
                // Realiza validaciones
                var dFechaDesde = Date.parse(fechaDesdeString);
                var dFechaHasta = Date.parse(fechaHastaString);
                
                if (dFechaHasta < dFechaDesde) {
                    alert("La fecha Hasta no puede ser menor que la fecha Desde");
                    return false;
                } else {
                    jQuery("#dataDiv").show();  
                    jQuery("#list").setPostData( { oper: "gm"} );
                    jQuery("#list").appendPostData( { desde: fechaDesdeString, hasta:fechaHastaString });
                    jQuery("#list").trigger("reloadGrid");
                    var ghideGrid = 0;
                    return  true;
                }
         });  
        
         jQuery("#list").jqGrid({
            caption: 'Empresas',
            colNames:['Codigo','Nombre', 'Sector', 'Status'],
            colModel :[ { name: "co_empresa",       index: "co_empresa",        width: 20, editable: false, sortable: false },
                        { name: "nb_razon_social",  index: "nb_razon_social",   width: 60, editable: false, sortable: false },
                        { name: "nb_sector",        index: "nb_sector",         width: 90, editable: false, sortable: false },
                        { name: "st_empresa",       index: "st_empresa",        width: 20, editable: false, sortable: false }
            ],
            //colNames:['Codigo','Nombre', 'Status'],
            //colModel :[ { name: "co_empresa",       index: "co_empresa",        width: 20, editable: false },
            //            { name: "nb_razon_social",  index: "nb_razon_social",   width: 60, editable: false },
            //            { name: "st_empresa",       index: "st_empresa",        width: 20, editable: false }
            //],
            datatype: "json",
            editurl: urlString,
            hidegrid: false,
            height: "47%",
            imgpath: "<%=Constantes.JQUERY_GRID_IMG_PATH%>",
            jsonReader: {
            repeatitems : true,
            id: "co_empresa"
            },
            loadtext: "<%=Constantes.JQUERY_GRID_LOADTEXT%>",
            loadui: "<%=Constantes.JQUERY_GRID_LOAD_UI%>",
            mtype: "<%=Constantes.JQUERY_GRID_MTYPE%>",
            pager: jQuery('#pager'),
            recordtext: "<%=Constantes.JQUERY_GRID_RECORDTEXT%>",
            rowNum: 10,
            sortname: "nb_razon_social",
            sortorder: "<%=Constantes.JQUERY_GRID_SORT_ORDER%>",
            toolbar: [true, "bottom"],
            url: urlString,
            viewrecords: true,
            width : 1000,
            multiselect:true,
            hidegrid: false,
            loadComplete:function() {
               if (ghideGrid == 1) {
                alert("hideGrid=" + ghideGrid);
                jQuery("#dataDiv").hide();  
                ghideGrid = 0;         
               }
               
            }
         }).navGrid("#pager", { refresh: false, edit: false, add: false, del: false, search: false });
});

<div id="dataDiv">  
    <table id="dataTable">
        <tr>
             <td>
               <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
                <div id="pager" class="scroll" style="text-align:center;"></div>
            </td>
        </tr>
    </table>
</div>

I already did it! The process is as follows:

1) Enclosed your grid in a div and hides this div using style="display:none"

2) In the button or image you click to see if the grid could be visible just

 jQuery("#dataDiv").show(); 

I think it could be a good idea add a visible property to the grid to show/hide it programatically...

I see your point, Tony

Thanks!