Thanks!

It is a little dificult to do that since we create a lot of elements. I think that giving this freedom (like used from you) is better approach, rather than to put additinal code.

Best Regards

Tony

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...

Thank you very much

 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'm having a doubt in Jgrid and need help.

I need that my column "id" stay hidden in the grid and in my form
it appears, not knowing I am doing this, anyone have any idea.

Thanks,

Seken

How do you do that?

Regards

Tony

I enclosed the grid in a div and gives this div a hidden style but when i wnt to show it the grid "flashes" and did not be shown...

TIA

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...

I already use this data in another place in my app and it is shown OK.

The only difference is in this part I just want to select/unselect rows, no CRUD is needed and I do not need to show all the fields that I have in json data...

Check your data returned from server. You have some inconsistency

between colModel and the number of returned rows.

Regards

Tony

I would like to show/hide a grid after the user sets two textfield in my form. Typically tow input that represent dates and when i click a button, if there is data found show it in the grid, otherwise hide the grid.

In my document.ready function I specify  hidegrid: false and hiddengrid:true, because I want the first time the grid don't be shown.

However I amg getting this error

Message: 'ts.p.colModel[...].align' is null or not an object

TIA