<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<script>
    findControl = function ()
    {
        strFormSerialize = $( 'form' ).serialize();
        relaodGrid( strFormSerialize );
    }
    
    relaodGrid = function( s_url_param )
    {
        jQuery( '#jqGrid' ).jqGrid( 'clearGridData' );
        jQuery( '#jqGrid' ).jqGrid( 'setGridParam', { url: '<?=buildUrl( 'item/gridShowItemAlm' )?>?' + s_url_param } );
        jQuery( '#jqGrid' ).trigger( 'reloadGrid' );
    }
    
    closeWindow = function( s_NameWin )
    {
        $( '#' + s_NameWin ).dialog( 'close' );
    }
</script>

<script>
    var jqGridContent = $( "#jqGrid" );
    jqGridContent.jqGrid
    (
        {
            url         : '<?=buildUrl( 'item/nothing', '' )?>',
            mtype       : "POST",
            datatype    : "json",
            editurl     : 'edicionData.php',                        
            colNames    : [ 'Id', 'Almacén', 'Lote', 'Fecha Ven', 'Stock' ],
            colModel    : 
                          [
                            { name: 'IdItem',               width: 0, align: 'center', hidden: true, hidedlg: false, editrules : { required: true }, key: true },
                            { name: 'DescripcionAlmacen',   width: 130, align: 'left', editable: false, sortable: false },
                            { name: 'IdLote',               width: 90, align: 'center', editable: false, sortable: false },
                            { name: 'FechaVencimientoLote', width: 90, align: 'center', editable: false, sortable: false, formatter: 'date', formatoptions: { newformat: 'Y-m-d' } },
                            { name: 'Stock',                width: 90, align: 'center', editable: false, sortable: false }
                          ],
            viewrecords : true,
            height      : $(window).height()-110, 
            width       : $(window).width() - 10,
            sortable    : true,
            multiSort   : true,
            emptyrecords: "No se encontro registros",
            rowNum      : 15,
            rownumbers  : true, // show row numbers
            pager       : "#jqGridPager",
            shrinkToFit : false,
            onCellSelect: function()
            {
            },
            beforeSelectRow: function ( rowid, e ) 
            {
            }
        }
    );
    $( "#jqGrid" ).jqGrid( 'bindKeys' );

    $(window).on
             (
                 "resize",
                 function ()
                 {
                     var newWidth = $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() - 5;
                     if( newWidth <= 705 )
                     {
                         jqGridContent.jqGrid( "setGridWidth", newWidth, false );
                     }
                     else
                     {
                         jqGridContent.jqGrid( "setGridWidth", newWidth, true);
                     }
                 }
             );
    if( $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() <= 705 )
    {
        jqGridContent.jqGrid( "setGridWidth", $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() - 5, false );
    }
    else
    {
        jqGridContent.jqGrid( "setGridWidth", $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() - 5, true);
    }
    if( $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() <= 558 )
    {
        jqGridContent.jqGrid( "setGridHeight", $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().height() - 110, false );
    }

    setTimeout
    (
        function()
        {
            findControl();
            $( "#jqGrid" ).parents( 'div.ui-jqgrid-bdiv' ).css( "height", ($(window).height()-110) );
        },
        300
    );
</script>
