<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( 'pro/gridServices', '' )?>?' + s_url_param } );
        jQuery( '#jqGrid' ).trigger( 'reloadGrid' );
    }
</script>

<script>
    var s_Estado_Valores = { value: "A:Activo;I:Inactivo" };

    var jqGridContent = $( "#jqGrid" );
    jqGridContent.jqGrid
    (
        {
            url         : 'nothing',
            mtype       : "POST",
            datatype    : "json",
            editurl     : 'edicionData.php',                        
            colNames    : [ 'IdItem', 'Codigo', 'Descripcion', 'Precio', '' ],
            colModel    : 
                        [
                            { name: 'IdItem',        		width: 0, align: 'center', hidden: true, hidedlg: false, editrules : { required: true }, key: true },
                            { name: 'IdItem',       		width: 90, align: 'center', editable: true, sortable: true },
                            { name: 'DescripcionCompleta',  width: 300, align: 'left', editable: true, sortable: true },
                            { name: 'PrecioConIGV', 		width: 90, align: 'center', editable: true, formatter: 'currency', formatoptions: { prefix: '', suffix: '', thousandsSeparator: ',' } },

                            { name: 'details', width: 30, sortable: false, search: false, align: 'center',
                                formatter:function( cero, uno, dos, tres )
                                {
                                	return '<span style="cursor:pointer; margin: 0 auto;" class="ui-icon ui-icon-circle-triangle-e" title="Agregar Item" onclick="parent.asignarValores( \''+dos.IdItem+'\', \''+dos.DescripcionCompleta+'\', \''+dos.IdUniMedVenta+'\' );"></span>'; //\''+dos.IdLote+'\',
                                }
                            }
                        ],
            viewrecords : true,
            width       : $(window).width() - 6,
			height      : $(window).height()-100,
            //width       : 600,
            //autowidth   : true,
            sortable    : true,
            multiSort   : true,
            //width: null,
            shrinkToFit: false,
            emptyrecords: "Nothing to display",
            rowNum      : 100,
            rownumbers  : true, // show row numbers
            //multiselect : true,//SELECCION MULTIPLE
            pager       : "#jqGridPager",
            //caption     : "Products / Category Primary Grid View"
            ondblClickRow: function( rowId, param2, param3, param4 ) 
            {
                //var s_UniMed      = param4.target.parentNode.children[2].innerHTML;
                //var s_Descripcion = param4.target.parentNode.children[7].innerHTML;
                //pr( "ondblClickRow -> " + s_UniMed + " - " + s_Descripcion );
                pr( arguments );
                pr( param4.target.parentNode.children[1].innerHTML );

                parent.asignarValores( param4.target.parentNode.children[1].innerHTML );
                //parent.asignarValores( rowId, s_Descripcion, s_UniMed );
            },
            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() - 100, false );
    }

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

<?=crearFuentePopupIframe( array( "div_id"=>"dialog", "iframe_id"=>"myIframe", "popup_title"=>"Resumen", "popup_height"=>400, "modal"=>true ) )?>