Refresh is not working

[bsolteam]

Hi,

I bought a paramquery pro version 2.0.4. In my project One grid is dependent on another grid, that means if I am changing the value of first grid it will change the value of second grid. What I want is without manual reloading i need to update my file. I searched google. I got one page in jsfiddle. This is the link

http://jsfiddle.net/3Ws9g/9/

. In this one reset button will change the grid data's. I tried this same code in my paramquery js file which I bought. But it is not working. After that i downloaded the js file from jsfiddle, for this the code is working . Why this code is not working in my paramquery js file which i bought.

[paramvir]

Pro and base version don't have exactly same API.

Please refer to this post for reset in PRO http://paramquery.com/forum/index.php?topic=571.0

[bsolteam]

Hi,

Thanks for your reply. It's working.

In my project grids are connected to tabs. If am changing the value in one grid it will change the value of the another grid  present in another tab. This procedure is working, but when you are refreshing the page at that time only the values get change otherwise it wont change. what I want is when I click the tab at the time it needs to get refresh. That means without manually giving refresh it needs to change the value in the grid. I used refresh, refreshView, at the time of clicking tab. It did not work. What I want to give.

[paramvir]

you could use the tabs activate event http://api.jqueryui.com/tabs/#event-activate to refresh the corresponding grid.

$grid.pqGrid( 'refresh' );

[bsolteam]

Already I used these things. It is not working.

[paramvir]

First please try to determine what's not working.

You mentioned that grids are linked to each other, change in one grid leads to change in other grid. So check it without using tabs and see whether the grids are working properly. And I hope you have been through this post http://paramquery.com/pro/tutorial#topic-refreshView

[bsolteam]

Hi, Am having the data's in local. Without reloading I want to refresh my grid. After launch the page, if am changing the value, that value needs to be updated in the grid without reloading the page. I used the following snippet to refresh my grid. But the changed value is not getting update.

$( "#totalpp_tab_main" ).on( "pqgridcellclick", function( event, ui ) {
      $grid.pqGrid("refreshDataAndView");
      });

What am doing wrong. What I needs to do.

[paramvir]

When we change local data dynamically in a grid, we use refreshView. refreshDataAndView also works fine as it's a superset of refreshView.

When you use grids in tabs, you use activate event of the tab and call refresh method on grids in the corresponding panel of that tab to correct the layout.

3 lines of code posted by you seems to be incorrect. It raises few questions

Why are you trying to refresh a grid upon cell click?

What is totalpp_tab_main?

Where is the code for activate event for jQueryUI tab. http://api.jqueryui.com/tabs/#event-activate

Could you please post entire code of your implementation with comments where it's working and where it's not so that I can have a look what you are trying to do.

[bsolteam]

Hi, This is my first grid code.

$(function () {
 var data = [
       [' LUPUS', '364,397','149,578','722,485','216,746','616,499'],
   ['TARG', '364,397','145,759','726,043','217,813','602,508' ],
   ['STX ', '402,954','161,178','696,850','209,055','671,647' ],
   ['TOPAZ', '442,182','176,873','743,550','223,065','734,120' ],
   ['MBER', '440,991','176.396','744,245','223,273','731217'],
   ['MAX', '347,076','138,830','673,964','202,189','552,763'],];

var obj = {
            editor:false,resizable:false, sortable:false, scrollModel:{autoFit:false, theme:false},draggable:false, collapsible: false,
      showTitle: true, showBottom:false,};
       
obj.colModel = [
       { title: "Ves", align:'left',cls:'gre1',width:130},
            { title: "Std 1 ", align:'center',width:100},
            { title: "Std 2", align:'center',width:100},
       { title: "Std  3 ", align:'center',width:100 },
            { title: "Previous", align:'center', cls:'tp-whired' ,width:100},
            { title: "Total Income", align:'center',width:100},];
       
obj.dataModel = { data: data };

$("#totalpp_tab_main").pqGrid(obj);
                  
$( "#totalpp_tab_main").pqGrid({
      refresh: footer123                        //call back function
      });   
});       


In this first grid I used  call back function to do some calculation . And following is my second grid.

$(function () {
        var data = [
['LUPUS','87000.00','43751.00','40000.00'],
['TARG','37000.00','44192.64','40000.00'],
['STX ','37000.00','41671.25','40000.00'],
['TOPAZ','37000.00','42700.42','40000.00'],
['MBER','37000.00','42706.75','40000.00'],
['MAX','37000.00','43734.50','40000.00'],];

var obj = { width: 1342,height: 450,   numberCell:false,editor: {type: 'textbox'},resizable:false, scrollModel:{autoFit:false, theme:false},sortable:false,draggable:false,minWidth: 30,editable: false,collapsible: false, showTitle: true, showBottom:false,};
       
obj.colModel = [
            { title: "Ves", cls:'ca-vess',align:'left',width:150, halign:"center"},
            { title: "Data",align:'center', width:350,colModel:[{title:"UMS (VOYAGE N.1)",align:'center', cls:'ca-vess1',width:350},{title:"DO (VOYAGE N.2)",align:'center', cls:'ca-vess1',width:350},{title:"GO (VOYAGE N.3)",align:'center', cls:'ca-vess1',width:350}]},         
        ];
       
obj.dataModel = { data: data };
        $("#cargolc_tab_main").pqGrid(obj);      
    });



My tab event code is

$('#tabs').tabs({                                                                 
            activate:function(event,ui){                                                       
                               if(ui.newTab.index()==0) {
                              var $grid=$("#totalpp_tab_main");
                                $grid.pqGrid("option", {height:($( window ).height()+740)/2.9, width: $( window ).width()-23});
                                $grid.pqGrid("refreshView");
                               }
                               if(ui.newTab.index()==1){
                                         var $grid=$("#additionalpp_tab_main");
                                $grid.pqGrid("option", {height:($( window ).height()+740)/2.9, width: $( window ).width()-23});
                                $grid.pqGrid("refreshView");
                        }
         $grid.pqGrid( 'refresh' );                                   
           }                                                                         
});   

    


Following is my function to do the calculation. This function present in different js file.

function footer123 ( event, ui ) {

      var $grid=$("#totalpp_tab_main");
      var CM = $grid.pqGrid("option", "colModel");
      var DM = $grid.pqGrid("option", "dataModel");
      var data = DM.data;
   
      var $grid1=$("#cargolc_tab_main");
      var CM1 = $grid1.pqGrid("option", "colModel");
      var DM1 = $grid1.pqGrid("option", "dataModel");
      var data1 = DM1.data;
            
            for(k=0; k<data.length;k++){
               var cfval=data1[k][0];
               var r;
               for (var j=0;j<data.length;j++){
                  var rowData=data[ j ];
                  for(var dataIndx in rowData ){
                     if(rowData[dataIndx] == cfval){
                        r = j;
                        break;
                     }
                  }
               }
               if(data[r][0]==data1[k][0]){
                  data[r][1]=((parseInt(data1[k][1]))*2)+((parseInt(data1[k][2]))*3);
               }
               else{
                  alert("Wrong Name");
               }
               $( "#totalpp_tab_main" ).pqGrid( "refreshCell",{ rowIndx:r, dataIndx: 1 });
               }
};

In the above function am getting the value of the data1[0][1] and data1[0][2]value in second grid and doing the calculation and printing  the value in first grid in the position of data[0][1] and it goes on. For this I need to check the value of data[n][0] in both first grid and second grid. if both are same then only it will print the value.      
 Now if am dynamically changing the value in the second grid it needs to change the value in the first grid without reload the page.

[paramvir]

  Now if am dynamically changing the value in the second grid it needs to change the value in the first grid without reload the page.

I understand that values in 1st grid are dependent upon values in 2nd grid.

Whenever you dynamically change ( update, add or delete) the values in second grid and call refreshView on second grid, it would fire refresh event on the 2nd grid. So you can call footer123 function from the refresh event of 2nd grid.

If you dynmically change (update ) the values in 2nd grid by inline editing, it would fire cellSave event in 2nd grid. In this case you can use cellSave event to call function footer123.

Be careful not to update any value or call any refresh function on 2nd grid while in function footer123 otherwise you would end up in an endless loop.