jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Reload of grid data does not work for grids with

Tags: local data reload

04/12/2010
21:55

chillifire

Member

Members

Forum Posts: 9

Member Since:
03/12/2010

Offline

I have a grid that allows users to load data with different time horizons. Initially the first month's worth of transaction data is loaded. Users can press reload buttons to load 6, 12, or 18 months worth of data. I use a grid with loadonce:true. These reload with different time horizons are done through custom buttons like:

jQuery("#listSales").jqGrid('navButtonAdd','#pager',{
caption:"6 months",
title:"Load 6 months sales history",
buttonicon:"ui-icon-refresh",
onClickButton : function () {
jQuery("#listSales").setGridParam({datatype:'json'});
jQuery("#listSales").setGridParam({url:'../json/sales?horizon=6'});
jQuery("#listSales").trigger("reloadGrid");
jQuery("#listSales").setGridParam({datatype:'local'});
}
});

This approach is following the advice of Tony in the following post to enable data reloading for grids with datatype local: /blog/?page_id=393/feature-request/sortclientside-but-allow-trigger-reload-on-different-url-param/&value=ajax%20reload&type=2&include=1&search=2&ret=all

Bug:

While the grid correctly reloads with the new URL as required, the data from the server is not written into the grids data store. The command

var allData = jQuery("#listSales").getGridParam('data');

after the reload shows that the original load with horizon=1 is still the data in the grid's data store. Note: The reloaded data is written into the visible grid, however the first visible page is empty and subsequent scrolls or sorts go back to the data store and suddenly we are back to the originally loaded data.

I am sure this is not the intended behavior, but a kink in the relatively new local data handling. Can this be fixed, please?

Appendix:

My full grid definition:

jQuery("#listSales").jqGrid({

url:'../json/sales?horizon=1',

datatype: "json",

height: 450,

width: 980,

colNames:['ID', 'Sub-Account', 'Account', 'Partner', 'Admin', 'Transaction ID', 'Transaction date', 'Name', 'Email', 'Amount', 'Cur', 'Vocher', 'Received', 'Mobile', 'Package Id', 'Package Name', 'Expiration', 'User', 'User Mac', 'NasID', 'Router MAC'],

colModel:[

{name:'rowID',hidden: true},

{name:'account',index:'account', width:60},

{name:'affiliate',index:'affiliate', width:60},

{name:'partner',hidden: true},

{name:'admin',hidden: true},

{name:'transid',index:'transid', width:110},

{name:'transdate',index:'transdate', width:90},

{name:'name',index:'name', width:100},

{name:'email',index:'email', width:150},

{name:'amountpaid',index:'amountpaid', width:40, formatter: 'int'},

{name:'currency',index:'currency', width:25},

{name:'voucher',index:'voucher', width:10,formatter:'checkbox'},

{name:'youoweus',index:'youoweus', width:10,formatter:'checkbox'},

{name:'mobile',hidden: true},

{name:'timeid',hidden: true},

{name:'package',hidden: true},

{name:'expiration',hidden: true},

{name:'userid',hidden: true},

{name:'mac',hidden: true},

{name:'nasid',hidden: true},

{name:'routermac',hidden: true},

rowNum:20,

loadonce:true,

scroll: 1,

mtype: "GET",

rownumbers: true,

rownumWidth: 30,

gridview: true,

pager: '#pager',

sortname: 'transdate',

ignoreCase: true,

loadui: "block",

viewrecords: true,

sortorder: "desc",

caption: "<?= $this->contentHeader ?>",

footerrow : true,

userDataOnFooter : true,

altRows : true,

});

jQuery("#listSales").jqGrid('filterToolbar',{stringResult:true,searchOnEnter:false,defaultSearch:"cn"});

jQuery("#listSales").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false,refresh:true},{},{},{});

jQuery("#listSales").jqGrid('navButtonAdd','#pager',{

caption:"6 months",

title:"Load 6 months sales history",

buttonicon:"ui-icon-refresh",

onClickButton : function () {

jQuery("#listSales").setGridParam({datatype:'json'});

jQuery("#listSales").setGridParam({url:'../json/sales?horizon=6'});

jQuery("#listSales").trigger("reloadGrid");

jQuery("#listSales").setGridParam({datatype:'local'});

var allData = jQuery("#listSales").getGridParam('data');

}

});

04/12/2010
23:18

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Hello chillifire,

It seems to me that the reason of the problems which you has is the usage of the line

jQuery("#listSales").setGridParam({datatype:'local'});

or the lines

jQuery("#listSales").setGridParam({datatype:'local'});
var allData = jQuery("#listSales").getGridParam('data');

after the jQuery("#listSales").trigger("reloadGrid"). The problem is that the loading of the JSON data from the server work asynchronous. Moreover your grid has already parameter loadonce:true. So the datatype will be switched automatically to 'local' after the server response will be processed by jqGrid.

So I suggest you just to remove jQuery("#listSales").setGridParam({datatype:'local'}) from your code. If you will want to get the value of data parameter after reloading of data you should do this inside of loadComplete event handler.

Best regards
Oleg

04/12/2010
23:57

chillifire

Member

Members

Forum Posts: 9

Member Since:
03/12/2010

Offline

[SOLVED]

Indeed this soled the problem.l Brilliant!

I need to get used to the asynchronous nature of ajax. I am stuck in my procedural programming world. (Just goes to show my age Smile )

BTW: Is there anyway to mark a topic as solved?

And to give ace responses like yours some kudos/feedback?

Anyway, many thanks, Oleg.

05/12/2010
00:26

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

You welcome chillifire,

By the way I'm also not so young Laugh . I am 46. The problem with the correct usage of JavaScript and jQuery is well known for people who uses mostly other programming languages. I started to use JavaScript only about 1,5 years ago. At the time I worked more as halt of year on some web project (which was new for me), which used jqGrid intensively. After the end of the project l started to write answers in this forum and in the stackoverflow.com mostly to study JavaScript and jqGrid a little better. It has become a hobby for me last time.

As far as I know there are no possibilities in /) then I will probably see that and answer you it I could. On the stackoverflow you will be able to voting answers (and question) up and "accept" one from the answers, which have meaning close to "solved".

Best regards
Oleg