callback function problem after upgrading to ver 2.1

[bsolteam]

Hi ParamQuery Team,
 I excited with the new version of paramquery. I am using my grid inside the tab. Totally 8 tabs are there. second and third tab only will get the values from db. Other tab grids will get the calculated data's from the second tab grid. In second tab I will call the js file. In that js file only am doing some calculation and i post these datas to the other grid. All these things will happen at the time of loading. In a previous version it works fine for me. After i upgraded into 2.1.0 it's not calling the js file at the load time. when I click the second tab at that time only it will call the js file and the data's will be filled to the other grid.

I want to work my callback function at the load time. For call back function I used the following code.

Code: [Select]

$( "#grid_editing").pqGrid({
refresh: update, });
Why my call back function is not working at that time of on load. Here I attached the code for your review. Please help me to overcome this issue.

My First grid code is

Code: [Select]

$(function () {
  var data = [{}];
var obj = {
width: "100%",
            height: 470,
minWidth:50,
            numberCell:false,
            editor:false,
editable: false,
title: "Total Pool Point",
            resizable:false,
sortable:false,
            scrollModel:{autoFit:false, theme:false},
draggable:false,
            collapsible: { on: false, collapsed: false },
showTitle: true,
showBottom:false,
virtualX:false,
          };
 
        obj.colModel = [
           
                        { title: "VESSEL", width: 150, dataType: "string",align:"left",halign:"center",dataIndx:"vessel"},
                    { title: "Entry into the Pool", width: 80, dataType: "string",align: "center"},
                { title: "Standard Voyage #1 Revenue ($) ", width: 80, dataType: "string",align: "center",colModel:[{title: "Houston/Aruba/Houston", width: 200,dataType: "string", align:"center",dataIndx:"voyage1revenue"}]},
                { title: "Standard Voyage #2 Revenue ($) ", width: 180, dataType: "string",align: "center",colModel:[{title: "Dalhousie/Antwerp/Houston", width: 200,dataType: "string", align:"center",dataIndx:"voyage2revenue"}]},
                { title: "Standard Voyage #3 Revenue ($) ", width: 80, dataType: "string",align: "center",colModel:[{title: "Houston/Jose/Dalhousie", width: 200,dataType: "string", align:"center",dataIndx:"voyage3revenue"}]},
                { title: "Total Voyages Time (days)", width: 100, dataType: "string",align: "center",dataIndx:"totalvoyagestime"},
                { title: "Total Pool Points", width: 100, dataType: "string",align: "center",dataIndx:"totalpoolpoints"},
                ];
        obj.dataModel = { data: data };
var $grid= $("#totalpp_tab_main").pqGrid(obj);

});   

My second grid is

Code: [Select]

$(function () {


    var ajaxObj = {
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        async: true,
        beforeSend: function (jqXHR, settings) {               
            $grid.pqGrid("showLoading");
        }
    };

function deleteRow(rowIndx, $grid) {
        $grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
        var ans = window.confirm("Are you sure to delete row No " + (rowIndx + 1) + "?");
 
        if (ans) {
       
            $grid.pqGrid("deleteRow", { rowIndx: rowIndx, effect: true });
            var changes = $grid.pqGrid("getChanges", { format: "byVal" }),
            deleteList = changes.deleteList;         
            $.ajax({
            url: "deleteList",
  type: 'POST',
  dataType: 'json',
  data: JSON.stringify(deleteList),
  contentType: 'application/json',
  mimeType: 'application/json',
                success: function (result) {
                    $grid.pqGrid("commit", { type: 'delete', rows: rows });
                    $grid.pqGrid("hideLoading");
                },
                error:function(data,status,er) {
              alert("error: "+data.vessel+" status: "+status+" er:"+er);
          },
                complete: function () {
                    $grid.pqGrid("hideLoading");
                     $grid.pqGrid("rollback", { type: 'delete' }); 
                     $grid.pqGrid( "refreshDataAndView" );
                }
            });
        }
        else {
            $grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
        }
    }


    //called when accept changes button is clicked.
    function acceptChanges() {
        if ($grid.pqGrid("saveEditCell") === false) {
            return false;
        }
 
        var isDirty = $grid.pqGrid("isDirty");
        if (isDirty) {
            //validate the new added rows.               
            var addList = $grid.pqGrid("getChanges").addList;
            for (var i = 0; i < addList.length; i++) {
                var rowData = addList[i];
                var isValid = $grid.pqGrid("isValid", { "rowData": rowData }).valid;
                if (!isValid) {
                    return;
                }
            }
            var changes = $grid.pqGrid("getChanges", { format: "byVal" }),
                addList = changes.addList,
                updateList = changes.updateList;
 
            //send to server
            if (addList.length) {
            alert("addList");
                $.ajax($.extend({}, ajaxObj, {
                    url: "addList",
                    data: JSON.stringify(addList),
                    success: function (rows) {
                    alert("saved");
                        $grid.pqGrid("commit", { type: 'add', rows: rows });
                    },
                    error:function(data,status,er) {
                alert("add");
                    alert("error: "+obj.vessel+" status: "+status+" er:"+er);
                },
                    complete: function () {
                        $grid.pqGrid("hideLoading");
                         $grid.pqGrid("rollback", { type: 'add' });
                        $grid.pqGrid( "refreshDataAndView" );
                    }
                }));
            }
            if (updateList.length) {
            alert("updateList");
                $.ajax($.extend({}, ajaxObj, {
                    url: "updateList",
                    data: JSON.stringify(updateList),
                    success: function (rows) {
                        alert("rows");
                        $grid.pqGrid("commit", { type: 'update', rows: rows });
                    },
                    error:function(data,status,er) {
              alert("update error");
                  alert("error: "+data.vessel+" status: "+status+" er:"+er);
              },
                    complete: function () {
                        $grid.pqGrid("hideLoading");
                          $grid.pqGrid("rollback", { type: 'update' });
                          $grid.pqGrid( "refreshDataAndView" );
                    }
                }));
            }
         
        }
    }
    var obj = {
        width: "100%",
        height: 470,
        minWidth: 100,
        wrap: false,
        hwrap: true,
        resizable: false,
        rowBorders: true,
        sortable:false,
        stripeRows : false,
        numberCell: { show: false },
        track: true, //to turn on the track changes.
        flexHeight: false,
        showBottom:false,
        dragColumns: { enabled: false },
        virtualX:false,
        toolbar: {
            items: [
                { type: 'button', icon: 'ui-icon-plus', label: 'New Product', listeners: [
                    { "click": function (evt, ui) {
                        //append empty row at the end.                           
                        var rowData = {  }; //empty row
                        var rowIndx = $grid.pqGrid("addRow", { rowData: rowData });
                        $grid.pqGrid("goToPage", { rowIndx: rowIndx });
                        $grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
                    }
                    }
                ]
                },
                { type: 'button', icon: 'ui-icon-disk', label: 'Accept Changes', style: 'margin:0px 5px;', listeners: [
                    { "click": function (evt, ui) {
                        acceptChanges();
                    }
                    }
                ]
                },
                { type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', listeners: [
                    { "click": function (evt, ui) {
                        $grid.pqGrid("rollback");
                    }
                    }
                ]
                },
            ]
        },
        scrollModel: {
            autoFit: false
        },
        selectionModel: {
            type: ''
        },
        hoverMode: 'cell',
        editModel: {
            saveKey: $.ui.keyCode.ENTER
        },
        title: "<b>Batch Editing</b>",
 
       
        colModel: [
{ title: "Vessel", align:'left',cls:'gre1',dataIndx:"vessel",halign:'center',dataType: "string",width:80,validations: [{ type: 'minLen', value: 1, msg: "Required" },{ type: 'maxLen', value: 40, msg: "length should be <= 40" } ]},
                                                                                                                       

{ title: "Ballast_me", align:'center',width: 80,dataIndx:"ballast_me",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Ballast_aux", align:'center',width: 80,dataIndx:"ballast_aux",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Laden_me", align:'center',width: 80,dataIndx:"laden_me",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Laden_aux", align:'center',width: 80,dataIndx:"laden_aux",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},                                                                                               
{ title: "Heating_aux", align:'center',width: 80,dataIndx:"heating_aux",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Loading_aux", align:'center',width: 80,dataIndx:"loading_aux",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Discharging_aux", align:'center',width: 80,dataIndx:"discharging_aux",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Idledischarging_aux", align:'center',width: 80,dataIndx:"idledischarging_aux",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Atsea_aux", align:'center',width: 80,dataIndx:"atsea_aux",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Loadingframo_aux", align:'center',width: 80,dataIndx:"loadingframo_aux",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},
{ title: "Igs_aux", align:'center',width: 80,dataIndx:"igs_aux",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},                                                                 
{ title: "Previous", align:'center',width: 80,dataIndx:"previous",dataType: "float",validations: [{ type: 'gte', value: 1, msg: "should be >= 1" }]},

 { title: "", editable: false, minWidth: 83, sortable: false, render: function (ui) {
return "<button type='button' class='delete_btn' id='delete'>Delete</button>";
}
 }
  ],
       
       

        dataModel: {               
            dataType: "JSON",
            location: "remote",
            recIndx: "vessel",
            url: "vessel",
            getData: function (response) {
                return { data: response.data };
            }
        },
        //save the cell when cell loses focus.
        quitEditMode: function (evt, ui) {               
            if (evt.keyCode != $.ui.keyCode.ESCAPE) {
                $grid.pqGrid("saveEditCell");
            }
        },
        cellBeforeSave: function (evt, ui) {
            var isValid = $grid.pqGrid("isValid", ui);
            if (!isValid.valid) {
                evt.preventDefault();
                return false;
            }
        }
    };
          obj.cellSave = function (ui) {
    refresh: update ( event, ui );
    };   
     
    var $grid = $("#grid_editing").pqGrid(obj);
 
   $grid.on('pqgridrefresh pqgridrefreshrow', function () {
   refresh: update,
   $grid.find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors'} })
        .unbind("click")
        .bind("click", function (evt) {
            var $tr = $(this).closest("tr");
            var obj = $grid.pqGrid("getRowIndx", { $tr: $tr });
                var rowIndx = obj.rowIndx;
            deleteRow(rowIndx, $grid);
        });
   });
   
   
    $( "#grid_editing").pqGrid({
refresh: update,
   }); 
});

[paramvir]

In second tab I will call the js file. In that js file only am doing some calculation and i post these datas to the other grid. All these things will happen at the time of loading.

How do you call the js file and what are the contents, location and format of your js file.

[bsolteam]

Hi,

This is my callback function. 

Code: [Select]

$( "#grid_editing").pqGrid({
refresh: update, });  In this update is the calling function  name. I will give the link like this.

Code: [Select]

<script src="${pageContext.request.contextPath}/resources/js/update.js" type="text/javascript"></script> In my update js file the content look like this.

Code: [Select]

function update ( event, ui ) {

var $grid=$("#grid_editing");
var CM = $grid.pqGrid("option", "colModel");
var DM = $grid.pqGrid("option", "dataModel");
var VesselTab = DM.data;

var $grid1=$("#standardVoyages_tab_main");
var CM1 = $grid1.pqGrid("option", "colModel");
var DM1 = $grid1.pqGrid("option", "dataModel");
var Standard1 = DM1.data;


var $grid2=$("#standardVoyages2_tab_main");
var CM2 = $grid2.pqGrid("option", "colModel");
var DM2 = $grid2.pqGrid("option", "dataModel");
var Standard2 = DM2.data;


var $grid3=$("#standardVoyages3_tab_main");
var CM3 = $grid3.pqGrid("option", "colModel");
var DM3 = $grid3.pqGrid("option", "dataModel");
var Standard3 = DM3.data;

var $grid4=$("#standardVoyages4_tab_main");
var CM4 = $grid4.pqGrid("option", "colModel");
var DM4 = $grid4.pqGrid("option", "dataModel");
var Standard4 = DM4.data;

var $grid5=$("#totalpp_tab_main");
var CM5 = $grid5.pqGrid("option", "colModel");
var DM5 = $grid5.pqGrid("option", "dataModel");
var total = DM5.data;

//VoyageTab[0].vessel="Hai";

//-----------For creating the rows------------//

if(VesselTab.length==total.length){
}else{
var len=(VesselTab.length-total.length);
for( var j=0; j<len; j++)
{
$( "#totalpp_tab_main" ).pqGrid( "addRow",
    {rowData: {} }
);
}
}


if(VesselTab[r].vessel==total[r].vessel)
{
total[r].voyage1revenue=((parseFloat(Standard1[r].netrevenue)));
total[r].voyage2revenue=((parseFloat(Standard2[r].netrevenue)));
total[r].voyage3revenue=((parseFloat(Standard3[r].netrevenue)));
total[r].voyage4revenue=((parseFloat(Standard4[r].netrevenue)));
total[r].voyagetotalrevenue=((parseFloat(total[r].voyage1revenue))+(parseFloat(total[r].voyage2revenue))+(parseFloat(total[r].voyage3revenue))+(parseFloat(total[r].voyage4revenue)));
total[r].totalvoyagestime=(((parseFloat(Standard1[r].totaldays)))+((parseFloat(Standard2[r].totaldays)))+((parseFloat(Standard3[r].totaldays)))+((parseFloat(Standard4[r].totaldays))));
total[r].weightedtce=(((parseFloat(total[r].voyagetotalrevenue))/parseFloat(total[r].totalvoyagestime)).toFixed(0)); //fixed
total[r].basicpoolpoints=((((parseFloat(total[r].voyagetotalrevenue))/(parseFloat(total[0].voyagetotalrevenue)))*100).toFixed(5));
total[r].additionalpoints=parseFloat(VesselTab[r].additional);
total[r].totalpoolpoints=(parseFloat(total[r].basicpoolpoints))+(parseFloat(total[r].additionalpoints));
$( "#totalpp_tab_main" ).pqGrid( "refreshRow", {rowIndx:r} );
}

//$("#totalpp_tab_main" ).pqGrid(refreshView);
};
The callback function must run at that time of loading.

[paramvir]

There have been performance optimizations in version 2.1.0. Due to that, grid might not refresh itself when its container is hidden (read as inactive tab) so the refresh event may not fire.

better to use create event (if dataModel.location = 'local' ) or load event (if dataModel.location = 'remote' ) to call update function.

Code: [Select]

$( "#grid_editing").pqGrid({
create: update, });

or

Code: [Select]

$( "#grid_editing").pqGrid({
load: update, });


[bsolteam]

Thanks for your support. Now it's working.