Forum

July 10th, 2011
You must be logged in to post Login Register

Search Forums:


 






trigger.("reloadGrid") not working when grid called from ajax function

No Tags
UserPost

20:00
20/12/2011


RustedBucket

Member

posts 8

My grid code is below. Basically I call it from an ajax function in order to use the response to get row data in the result. Unfortunately this has broken the reload trigger when a cell is updated.

<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>


Now if I replace the refreshGrid function with this one:

    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});
            }
        });
        
}


This works but obviously is reloads the entire grid. Not necessarily a problem but you visibly see the grid unload then reload vs. before when the whole grid was loaded from one function you didn't notice any flicker at all.


Any ideas on how to correct this?

No Tags

About the jQuery Grid Plugin – jqGrid forum

Most Users Ever Online:

215


Currently Online:

37 Guests

Forum Stats:

Groups: 1

Forums: 7

Topics: 10280

Posts: 30385

Membership:

There are 11049 Members

There have been 448 Guests

There is 1 Admin

There are 2 Moderators

Top Posters:

OlegK – 1210

markw65 – 179

kobruleht – 144

phicarre – 132

YamilBracho – 124

Renso – 118

Administrators: admin (60 Posts)

Moderators: tony (7392 Posts), Rumen[Trirand] (81 Posts)




Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information