2009-07-12

Custom data loading to jqGrid

I'v found jqGrid as best jQuery grid solution. Yeah ! ))

possible ways to obtain data are - 'xml', 'json','clientSide' or 'local', 'xmlstring', 'jsonstring' and 'function (...)'

If you use function() - it's 4 u :

jQuery(document).ready(function() {
 jQuery("#list").jqGrid({
  datatype : function(postdata) {
   var gridObj = jQuery("#list");
   gridObj.clearGridData().setGridParam({page: postdata.page});
   
   CustomerService.getCustomersPaged(postdata.page, postdata.rows, function(data) {
       $.each(data.customers, function(index, val) {
        gridObj.addRowData(val.id, val);
       });
       
       gridObj.setGridParam({lastpage: data.totalPages});
       gridObj.each(function() {
         if (this.grid) this.updatepager();
       });
   });
  },
  ...
 });
});


1. gridObj.clearGridData(); - clear previous obtained data (paging)
2. gridObj.setGridParam({page: postdata.page}); - set actual page before data uploading
3. gridObj.addRowData(...) - filling with data
4. gridObj.setGridParam({lastpage: data.totalPages}); - set total pages
5. and .. if (this.grid) this.updatepager(); - updates pager object

2 comments:

Ádám Varga said...

Hi! You saved my life with this code, can I upload it to the jqgrid documentation wiki?

ziDev said...

sure )