<div id="gridwrapper">
<table id="bwdetail" style="width:100%;"></table>
<div id="pager"></div>
</div>

<script src="/js/jqGrid/src/grid.celledit.js" type="text/javascript"> </script>

<script type="text/javascript">
var vendor_id = '<?php echo Zend_Controller_Front::getInstance()->getRequest()->getParam( "id", null ); ?>';

var myGrid = $('#bwdetail');
var ret;
var theight;

jQuery(document).ready(function(){f
    
    $.ajax({
        type: "POST",
        url:'/air/buyworksheet/detailgrid/id/'+vendor_id,
        datatype: "json",
        success: function (data, status) {
            var tdata = JSON.stringify(data);
            var trows = data.records;
            if(trows >= 15) {
                if (innerHeight>=600) var theight = 390; else var theight = 250;
            } else {
                var theight='auto';
            }

            renderGrid(trows, theight, tdata);
            resize_the_grid();
            jQuery("#bwdetail").jqGrid('navGrid', '#pager', {add:false, view:false, edit:false, del:false, search:true,refresh:true});
        }
    });

    function refreshGrid() {
        jQuery("#bwdetail").trigger("reloadGrid");
    }    
    
    function renderGrid(trows, theight, tdata) {

        jQuery("#bwdetail").jqGrid({
    
            datatype: "jsonstring",
            datastr: tdata,
               height:theight,
            colNames:['id','Item', 'UPC', 'Description', 'Sales Qty.', 'Need', 'Order Qty.', 'Min. Qty.', 'Purchase U/M', 'Ext. Cost'],
               colModel:[
                   {name:'id',index:'id', width:25, align:"center", sorttype:'int',hidden:true},
                   {name:'item_number',index:'item_number', width:20, align:"center", sorttype:'int'},
                   {name:'barcode',index:'barcode', width:25, align:"center",sorttype:'int'},
                   {name:'description',index:'description', width:75},
                   {name:'quantity',index:'quantity', width:15, align:"center"},
                   {name:'need',index:'need', width:15, align:"center",editable:true,classes:'activecell' },
                   {name:'order_qty',index:'order_qty', width:15, align:"center",editable:true,classes:'activecell' },
                   {name:'minimum_purchase_quantity',index:'minimum_purchase_quantity', width:15, align:"center"},
                   {name:'measurement_code',index:'measurement_code', width:20, align:"center"},
                   {name:'cost',index:'cost', width:15, align:"center",formatter: 'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "}},
               ],
               rowNum: trows,
               rownumbers: true,
               rownumWidth: 40,       
               pager: '#pager',
               altRows: true,
               altclass:'myAltRowClass',
               gridview: true,
            viewrecords: true,
            footerrow: true,
            userDataOnFooter: true,     
            sortorder: "asc",
            autowidth: true,
            shrinkToFit: true,
            cellEdit: true,
            cellsubmit: 'clientArray',
            afterSaveCell : function(rowid,name,val,iRow,iCol) {
                var ret = jQuery("#bwdetail").jqGrid('getRowData',rowid);

                if(name == 'need') { $.post("/air/buyworksheet/updategrid/id/"+ret.id+"/bc/"+ret.item_number+"/n/"+ret.need); refreshGrid();}
                if(name == 'order_qty') { $.post("/air/buyworksheet/updatequantity/id/"+ret.id+"/bc/"+ret.item_number+"/q/"+ret.order_qty); refreshGrid();}

                
            }                          
        });
    }

    function resize_the_grid() { $('#bwdetail').fluidGrid({base:'#gridwrapper', offset:-20}); }

    $(window).resize(resize_the_grid);
});

</script>

    function refreshGrid() {

        $('#bwdetail').jqGrid('GridUnload');

        $.ajax({
            type: "POST",
            url:'/air/buyworksheet/detailgrid/id/'+vendor_id,
            datatype: "json",
            success: function (data, status, xhr) {
                var tdata = JSON.stringify(data);
                var trows = data.records;
                if(trows >= 15) {
                    if (innerHeight>=600) var theight = 390; else var theight = 250;
                } else {
                    var theight='auto';
                }
                                
                renderGrid(trows, theight, tdata);
                resize_the_grid();
                jQuery("#bwdetail").jqGrid('navGrid', '#pager', {add:false, view:false, edit:false, del:false, search:true,refresh:true});
            }
        });
        
}