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

<script>
    findControl = function ()
    {
        strFormSerialize = $( '#form1' ).serialize();
        relaodGrid( strFormSerialize );
    }
    
    relaodGrid = function( s_url_param )
    {
        jQuery( '#jqGrid' ).jqGrid( 'clearGridData' );
        jQuery( '#jqGrid' ).jqGrid( 'setGridParam', { url: '<?=buildUrl('addemp/gridCria','block=001')?>?' + s_url_param } );
        jQuery( '#jqGrid' ).trigger( 'reloadGrid' );
    }
    
    showEdit = function( i_Id )
    {
        $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'addemp/nvoUnidad', 'block=001&s_TipoProc=upd&i_Id='.$i_Id.'&i_IdDet=' )?>' + i_Id );
        $( '#dialog' ).dialog( 'open' );
    }
    
    showView = function( i_Id )
    {
        $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'addemp/showUniCria', 'block=001&s_TipoProc=shw&i_Id='.$i_Id.'&i_IdDet=' )?>' + i_Id );
        $( '#dialog' ).dialog( 'open' );
    }
    
    deleteRow = function( i_Id )
    {
        $( '#myIframe' ).attr( 'src', '<?=buildUrl( 'addemp/showUniCria', 'block=001&s_TipoProc=dlt&i_Id='.$i_Id.'&i_IdDet=' )?>' + i_Id );
        $( '#dialog' ).dialog( 'open' );
    }
    
    closeWindow = function( s_NameWin )
    {
        $( '#' + s_NameWin ).dialog( 'close' );
    }
</script>

<script>
    var s_Estado_Valores = { value: "A:Activo;I:Inactivo" };
    var s_Tipo_Valores = { value: "EST:Estanque;LAG:Laguna" };

    var jqGridContent = $( "#jqGrid" );
    jqGridContent.jqGrid
    (
        {
            url         : '<?=buildUrl( 'addemp/gridCria','block=001&IdCompania='.$i_Id )?>',
            mtype       : "POST",
            datatype    : "json",
            editurl     : 'edicionData.php',                        
            colNames    : [ 'IdAlmacen', 'Almacen Cod', 'Descripción Almacén', 'Descripción Sucursal', 'Estado'/*, '', '', ''*/ ],
            colModel    : 
                          [
                            { name: 'Id',                  width: 0, align: 'center', hidden: true, hidedlg: false, editrules : { required: true }, key: true },
                            { name: 'IdAlmacen',           width: ($( window ).width())/15,  align: 'center', editable: true, sortable: false},
                            { name: 'DescripcionLocal',    width: ($( window ).width())/5,  align: 'center', editable: true, sortable: false },
                            { name: 'DescripcionSucursal', width: ($( window ).width())/5,  align: 'center', editable: true, sortable: false },
                            { name: 'Estado',              width: ($( window ).width())/8,  align: 'center', editable: true, sortable: false, 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' onclick='showEdit( $(this).parent().parent()[0].id );'></span>"
                                }
                            },
                            { name: 'details', width: 20, sortable: false, search: false, 
                                formatter:function()
                                {
                                    return "<span style='cursor:pointer;' class='ui-icon ui-icon-document' onclick='showView( $(this).parent().parent()[0].id );'></span>"
                                }
                            },
                            { name: 'del', width: 20, sortable: false, search: false,
                                formatter:function()
                                {
                                    return "<span style='cursor:pointer;' class='ui-icon ui-icon-trash' onclick='deleteRow( $(this).parent().parent()[0].id );'></span>"
                                }
                            }
                            */
                          ],
			viewrecords : true,
			//height      : $(window).height()-200, 
			//width       : $(window).width() - 20,
            //width       : 600,
            autowidth   : true,
            sortable    : true,
            multiSort   : true,
            //width: null,
            //shrinkToFit: false,
            emptyrecords: "Nothing to display",
            //height      : 480,
            rowNum      : 15,
            rownumbers  : true, // show row numbers
            //multiselect : true,//SELECCION MULTIPLE
            pager       : "#jqGridPager",
            //caption     : "Products / Category Primary Grid View"
            onCellSelect: function()
            {
                // rowid, iCol, cellcontent
                //console.log( arguments );
            },
            beforeSelectRow: function ( rowid, e ) 
            {
                /*
                console.log( arguments );
                var iCol = $.jgrid.getCellIndex( e.target );
                if ( iCol >= firstButtonColumnIndex ) 
                {
                    alert( "rowid=" + rowid + "\nButton name: " + buttonNames[iCol] );
                }
                // prevent row selection if one click on the button
                return ( iCol >= firstButtonColumnIndex ) ? false: true;
                */
            }
        }
    );

    $( "#jqGrid" ).jqGrid( 'bindKeys' );
    
    /*
    $('#jqGrid').navGrid
    ( '#jqGridPager',
        // the buttons to appear on the toolbar of the grid
        { edit: true, add: true, del: true, search: false, refresh: false, view: true, position: "left", cloneToTop: false },
        // options for the Edit Dialog
        {
            beforeShowForm: function( form ) 
            {
                console.log( arguments );
                var dlgDiv = $("#editmod" + jqGridContent[0].id);
                var parentDiv = dlgDiv.parent(); // div#gbox_list
                var dlgWidth = dlgDiv.width();
                var parentWidth = parentDiv.width();
                var dlgHeight = dlgDiv.height();
                var parentHeight = parentDiv.height();
                // change parentWidth and parentHeight in case of the grid
                //       is larger as the browser window
                dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
            },
            editCaption   : "The Edit Dialog",
            recreateForm  : false,
			checkOnUpdate : true,
			checkOnSubmit : true,
            closeAfterEdit: true,
            width         : 800,
            errorTextFormat: function ( data ) 
            {
                return 'Error: ' + data.responseText
            }
        },
        // options for the Add Dialog
        {
            closeAfterAdd: true,
            recreateForm: true,
            errorTextFormat: function (data) 
            {
                return 'Error: ' + data.responseText
            }
        },
        // options for the Delete Dailog
        {
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            }
        }
    );
    */
    
    $(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>
<div id="dialog2"><iframe id="myIframe2" src="" frameborder="0" height="100%" width="100%"></iframe></div>

<script>
    objMainTab.modalUIDialog( "#dialog", { title : "Unidad de Crianza", width : 650, height  : 450 } );
    objMainTab.modalUIDialog( "#dialog2", { title : "Eliminar Uniad de Crianza", width : 650, height  : 400 } );
</script>