7

I was wondering whether there is a better way to load large Json data set from the server.

I am using jqgrid as loadonce:true. i need to load around 1500 records at once and also i don't use pagination options. is there any better way to achieve this? Thank you in advance.

This is my Grid code - 

 $(function(){ $("#testgrid").jqGrid({ url:getGridUrl, datatype: 'json', mtype: 'GET', height: 250, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int",search:false}, {name:'invdate',index:'invdate', width:90, sorttype:"date",search:false}, {name:'name',index:'name', width:100,search:false}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float",search:false}, {name:'total',index:'total', width:80,align:"right",sorttype:"float",search:false}, {name:'note',index:'note', width:150, sortable:false,search:false} ], multiselect: true, multiboxonly:true, caption: "Manipulating Array Data", pager: '#testgridpager', //Auto load while scrolling //scroll: true, //to hide pager buttons pgbuttons:false, recordtext:'', pgtext:'', loadonce: true, sortname: 'id', sortorder: 'asc', viewrecords: true, multiselect: true, jsonReader : { root: "rows", //page: "page", //total: "total", records: "records", repeatitems: false, cell: "cell", id: "id" }, loadComplete: function(data) { var rowId; //alert(data.length); //alert('load complete'+data.rows.length); //set checkboxes false if mode is set to true if(mode){ for(var i=0;i<data.rows.length;i++){ rowId=data.rows[i].id; disableRow(rowId); var searchVal = $("#gs_amount").val().trim(); if(searchVal ==data.rows[i].amount){ jQuery("#testgrid").jqGrid('setSelection',rowId); //heighlightSearch(); } } } } }); //toolbar search $("#testgrid").jqGrid('filterToolbar',{stringResult:true,searchOnEnter:false}); }); function disableRow(rowId){ $("#testgrid").jqGrid('setRowData', rowId, false, {color:'gray'}); var trElement = jQuery("#"+ rowId,$('#testgrid')); trElement.removeClass("ui-state-hover"); trElement.addClass('ui-state-disabled'); trElement.attr("disabled",true); }
Improve this question
12
  • Could you include the javascript code which you currently use? Do you use local paging of the data? Do you use gridview:true parameter? Commented Apr 14, 2011 at 14:38
  • @Oleg - Thanks oleg. i used gridView parameter. please find the updated question. Commented Apr 14, 2011 at 15:14
  • @Sam: I am very busy now, but if your problem will not be solved till Saturday I'll write you some suggestions. What do disableRow? I am not sure that I understand what you do inside of loadComplete. If in the filter bar for amount no data exist you should do nothing. If in amount the data exist the data are filtered and you should select all rows. Is it so? Moreover I don't see gridview:true parameter. Is the example which you posted the real example which you tested? How long time is the loading in your tests? Which browser is the most important for you? Commented Apr 14, 2011 at 16:47
  • @Oleg - Thanks for your valuable time Oleg. this is the grid i used to test jqgrid. i just removed gridview param to check the consequences. inside loadComplete if the amount match the grid value amount it needs to get selected. you are right i do need to put empty check in loadComplete. I am still searching the better ways to do this(load large data). IE 8 will be my most important browser. Thanks for your response Oleg. I will looking forward to your thoughts among this.Appreciate it. Commented Apr 14, 2011 at 17:42
  • @Oleg - If you have some time can you please send me some directions about any approach for this? if you have time to spare only..Appreciate your help. Commented Apr 16, 2011 at 16:13

2 Answers 2

Reset to default
10

On example of this demo you can see the time of loading 1500 rows for your grid in case of usage of gridview: true.

The most performance problem of your example are inside of loadComplete function. If you do need to make some modifications on the grid you should use jQuery to manipulate the grid contain. The best performance you can archive if you use DOM elements of the grid directly like in the example

loadComplete: function() { var i=0, indexes = this.p._index, localdata = this.p.data, rows=this.rows, rowsCount = rows.length, row, rowid, rowData, className; for(;i<rowsCount;i++) { row = rows[i]; className = row.className; //if ($(row).hasClass('jqgrow')) { // test for standard row if (className.indexOf('jqgrow') !== -1) { rowid = row.id; rowData = localdata[indexes[rowid]]; if (rowData.amount !== "200") { // if (!$(row).hasClass('ui-state-disabled')) { if (className.indexOf('ui-state-disabled') === -1) { row.className = className + ' ui-state-disabled'; } //$(row).addClass('ui-state-disabled'); } } } }

You can see the corresponding example live here.

In the implementation of loadComplete function I use the fact, that jqGrid having loadonce:true parameter use internal parameters _index and data which can be used to access the contain of the grid. In the example I disabled the rows which not contain "200" in the amount column.

UPDATED: The answer describes how to use rowattr callback to simplify the solution and to have the best performance (in case of gridview: true of cause).

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@Oleg- Thank you very much oleg. now I got the base line from The best performance you can archive if you use DOM elements phrase. examples are really helpful. Thanks for your knowledge sharing and the kind guidance.Greatly appreciate your time & the effort.
1

I would be tempted to look into the Autoloading on scroll feature of jqGrid. I would never load 1500 rows upfront. Any reason you cannot page?

Improve this answer

2 Comments

thanks for the turn over. Requirement is not to use pagination. i used to look at scroll:true function and i found this article. Thats why i wonder what will be the best way to use.
@Sam - the issue maybe his js/php who knows. I would test for myself. I am sure others would have mentioned and it is upto version 4.0 now.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.