<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('aprobacion/grid','block=001')?>?' + s_url_param } );
        jQuery( '#jqGrid' ).trigger( 'reloadGrid' );
    }
    
    showView = function( i_Id )
    {
        $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'aprobacion/process', 'block=001&s_TipoProc=shw&i_Id=' )?>' + i_Id );
        $( '#dialog' ).dialog( 'open' );
    }
    
    closeWindow = function( s_NameWin )
    {
        $( '#' + s_NameWin ).dialog( 'close' );
    }
</script>

<script>
    var s_Estado_Valores = { value: "PR:Preparación;RE:Rechazado;AP:Aprobado;AN:Anulado;CO:Compleatado" };
    var s_TipoOC_Valores = { value: "N:NORMAL;T:TRANSFERENCIA;" };
    
    var jqGridContent = $( "#jqGrid" );
    jqGridContent.jqGrid
    (
        {
            url         : '<?=buildUrl('recepcion/grid','block=001')?>',
            mtype       : "POST",
            datatype    : "json",
            editurl     : 'edicionData.php',                        
            colNames    : [ 'IdOrdenCompraConcat', 'Nro O/C', 'FechaEntrega', 'Tipo', 'Proveedor', 'Monto Local', 'Monto $', 'Estado', '' ],
            colModel    : 
                          [
                            { name: 'IdOrdenCompraConcat',  width: 0, align: 'center', hidden: true, hidedlg: false, editrules : { required: true }, key: true },
                            { name: 'IdOrdenCompra',        width: ($( window ).width())/10, align: 'center', editable: true, sortable: true },
                            { name: 'FechaEntrega',        	width: ($( window ).width())/10, align: 'center', editable: true, sortable: true, formatter: function( cellvalue ){ return cellvalue.substring(0, 10); } },
                            { name: 'TipoOrden',            width: ($( window ).width())/8,  align: 'center', editable: true, sortable: false, formatter: 'select', edittype:"select", editoptions: s_TipoOC_Valores },
                            { name: 'NombreProveedor',      width: ($( window ).width())/4,  align: 'center', editable: true },
                            { name: 'FormatMontoBruto',  	width: ($( window ).width())/10, align: 'center', editable: true, sortable: false },
                            { name: 'FormatMontoDolares',  	width: ($( window ).width())/10, align: 'center', editable: true, sortable: false },
                            { name: 'Estado',               width: ($( window ).width())/10, align: 'center', editable: true, formatter: 'select', edittype:"select", editoptions: s_Estado_Valores },
                            
                            { name: 'edit', width: 20, sortable: false, search: false,
                                formatter:function()
                                {
                                    return "<span style='cursor:pointer;' class='ui-icon ui-icon-pencil' title='Recepcionar Orden de Compra' onclick='location.href=\"<?=buildUrl('recepcion/process','block=001&s_TipoProc=upd&i_Id=')?>\" + $(this).parent().parent()[0].id;'></span>"
                                }
                            }
                          ],
			viewrecords : true,
			height      : $(window).height()-200, 
			width       : $(window).width() - 20,
            sortable    : true,
            multiSort   : true,
            emptyrecords: "No se encontro registros",
            rowNum      : 15,
            rownumbers  : true, // show row numbers
            pager       : "#jqGridPager",
            onCellSelect: function()
            {
            },
            beforeSelectRow: function ( rowid, e ) 
            {
            }
        }
    );
    $( "#jqGrid" ).jqGrid( 'bindKeys' );
    $(window).on
    ( 
        "resize", 
        function () 
        {
            var newWidth = $( "#jqGrid" ).closest( ".ui-jqgrid" ).parent().width() - 20;
            jqGridContent.jqGrid( "setGridWidth", newWidth, true);
        }
    );
</script>

<div id="dialog"><iframe id="myIframe" src="" frameborder="0" height="100%" width="100%"></iframe></div>

<script>
    objMainTab.modalUIDialog( "#dialog", { title : "", width : 700, height  : 420 } );
</script>