Forum
08:55
25/08/2014
I'm trying to build a table using jqgrid which does sorting and filtering on the clientside, i.e. use AJAX to retrieve a JSON object , and paging of the data with server interaction. Is this possible, if yes could you please help me on this?
If i use datatype:'json' with loadonce:false option then the server is responsible for sorting, paging and optionally searching/filtering of the data. In the case every request to the server contains important input parameters which default values are:page,rows,sidx and sord. There are other parameters _search, nd and some other, but there are not so important in your case.
If i user datatype: 'json' with loadonce:true option then client side filtering and sorting is working, but pagination interaction to the server is not working.
Â
As per my requirement, i need to fetch the records from server based on the pagination and sorting with filtering on the client side.
Â
Need help?
17:44
Moderators
30/10/2007
Hello,
Â
Use onPaging event to change the datatype. Do not forget to set it again to local in the gridComplete event.
Â
See docs for these events.
Â
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
08:36
25/08/2014
Hi Tony,
Â
Thanks for replying. Now pagination is working but client side filtering and refreshing in not working for me. Could you please help me on this,Here is my code for ur reference.
Â
jQuery("#produtionordergrid").jqGrid(
         {
           Â
            datatype : "json",
            url : "/service/production/order/status",  Â
            colNames : ['Id', 'Model', 'Version', 'Purchaser', 'Project', 'PO', 'Quantity', 'Status'],
            colModel : [
            {
               name : 'productionOrderId', index : 'productionOrderId',
                  formatter : function(cellvalue, options, rowObject) {
                  return rowObject["productionOrderId"];
               }
            },
            {
               name : 'productCode', index : 'productCode',
               formatter : function(cellvalue, options, rowObject) {
                  return rowObject["productCode"];
               }
            },
            {
               name : 'version', index : 'version', width : 100
            },
            {
               name : 'purchaserOrgName', index : 'purchaserOrgName',
               formatter : function(cellvalue, options, rowObject) {
                  return rowObject["purchaserOrgName"];
               }
            },
            {
               name : 'projectName', index : 'projectName',
               formatter : function(cellvalue, options, rowObject) {
                  return rowObject["projectName"];
               }
            },
            {
               name : 'po', index : 'po'
            },
            {
               name : 'quantity', index : 'quantity',
               formatter : function(cellvalue, options, rowObject) {
                  return rowObject["quantity"];
               }
            },           Â
            {
               name : 'productionOrderStatus',
               index : 'productionOrderStatus'
            }
            ],
            shrinkToFit: true,
            height : '100%',
            autowidth:true,
            viewrecords: true,
            loadonce: false,Â
            sortable: true,
            sortname: 'productionOrderId',
            pager: "#produtionorderpager",
            rowNum: 100,
            rowList: [100,200, 500],
            multiselect:true,
            //jsonReader: { repeatitems : false, id: "productionOrderId" },           Â
            ignoreCase: true,
            onSelectRow: function(id){
               selectRow();
            },
            onSelectAll: function(aRowids, status){
               selectRow();
            },
            onPaging: function () {
               $("#produtionordergrid").setGridParam({datatype:"json"});
            },
            gridComplete: function(){              Â
               $("#produtionordergrid").setGridParam({datatype:"local"});
            }
         });
     Â
         $('#produtionordergrid').jqGrid('navGrid', '#produtionorderpager', {
             search: true, searchtext: "Search", edit: false, add: false, del: false, refresh: true, refreshtext:"Refresh" },{}, {}, {},   {
                 beforeShowSearch: function($form) {
                     $('#searchmodfbox_produtionordergrid').width("auto");
                     return true;
                 },
                 showQuery: false, sopt: ['eq', 'ne', 'cn', 'nc', 'bw', 'ew'], defaultSearch: 'cn'         Â
         }).navButtonAdd('#produtionorderpager', {
             caption: "Export to Excel",
             buttonicon: "ui-icon-disk",
             onClickButton: function () {
                exportProductionOrders('excel');
             }
         });
Thanks
Mallia
10:39
Moderators
30/10/2007
Hello,
Humm - it seems that I tell you this is wrong way.
Try with
loadonce: true
and do not use
gridComplete to put the data type local - i.e disable this event.
The trick should be that if loadonce is true - it put automatically datatype local after loading the data.
The other code do not need to be changed.
Also it is a good idea to use key:true in one column of colModel.
Â
Please let me know on the result. If this does not help I will try to prepare a example.
Â
Kind Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
49 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66