jquery - Make 'Search' remote and everything else (sorting, pagination, etc) local in jqGrid

Question

I'm working on a Django project which uses JQgrid to display data from the db.

What I'm looking to achieve is to have only the search option wired to perform a remote search where the server will return a result set and every other jqgrid option like column-sorting, pagination etc. to be performed client side.

I know this can be done by setting loadonce:true and toggling the 'datatype' parameter between 'local' and 'json' based on the .click() event depending on whether I click sort or next-page, search, etc.

Is there another way to do this? And if not, can you guys suggest a clean way of doing the above hack.

Thanks!

Answer 1

I managed to get this done and I'm glad to share this with the rest of you all. I've posted my entire jqgrid code below the explanation for your reference.

So firstly, I use JSON for my results and therefore the jsonReader.

Next, following are the settings that are specific to achieving the {{search: remote},{sorting: local}, {pagination: local}} behavior.

1. Set loadonce: false or else hitting the Search button will not hit the server and instead will always do a local search.

2. I wanted to implement jqGrid's multiple-search feature and therefore to have the tiny 'magnification-glass' appear in your pager bar..

   jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{},{multipleSearch:true});
   

3. Now how I achieve the remote search feature is by toggling the datatype from local to json on the onSearch and onClose event. i.e. On firing a search query (i.e. clicking the 'Find' button) I set the loadonce to false and datatype to json. This ensures a remote search. Now that our grid is populated with remote-searched-data, we have to switch back to datatype:local, however explicitly setting it onClose doesn't work, so instead i set loadonce: true which later sets datatype: local itself later. Also notice that I have closeAfterSearch: true, closeOnEscape: true, so that I ensure that the onClose event is always closed after firing a search query.

   jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true,
                                                       onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'});
                                                                                       $("#list2").trigger("reloadGrid");                                  
                                                                                       },                                                              onClose: function(){$("#list2").trigger("reloadGrid");                                                                                  
                                                                                   $("#list2").setGridParam({loadonce: true});
                                                                                   $(".ui-icon-refresh").trigger('click');                                                                                 
                                                                                   }
                                                   });
   

The $(".ui-icon-refresh").trigger('click'); forces a refresh after loading the results. This was necessary in some cases (don't know why). I just stumbled into this fix by myself and I'm not sure why it works. I'd love to know the reason behind it though if you have an idea.

1. Lastly, everytime my grid loaded the search box would be popped by default. So I forced a close on it by simply having jquery click on the 'x' button of the modal box. Hacky but works! :P

   $(".ui-icon-closethick").trigger('click');
   

<<< Entire jqGrid code >>>

Kindly excuse me for the 'xyz's in the code. I had some Django code in there and so I just replaced it with xyz to avoid any confusion.

jQuery(document).ready(function(){ 

  $("#list2").jqGrid({

    url:'xyz',
    datatype: 'json',
    loadonce: false,
    mtype: 'GET',
    colNames:xyz
    colModel :xyz,
    jsonReader : {
                repeatitems: false,
                root: "rows",
                page: "page",
                total: "total",
                records: "records"
        },
    height: '100%',
    width: '100%',
    pager: '#pager2',
    rowNum:15,
    rowList:[10,15,30],
    viewrecords: true,
    caption: '&nbsp',
     autowidth: false,
     shrinkToFit: true,
     ignoreCase:true,
     gridview: true

   });
  jQuery("#list2").jqGrid('navGrid','#pager2',{ del:false,add:false,edit:false},{},{},{}, {multipleSearch:true});
  jQuery("#list2").jqGrid('navButtonAdd', '#pager2',
                         {
                             caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
                             onClickButton: function() {
                                 jQuery("#list2").jqGrid('columnChooser');
                            }
                         });
  jQuery("#list2").jqGrid('searchGrid', {multipleSearch: true, closeAfterSearch: true, closeOnEscape: true,
                                                        onSearch: function(){$("#list2").setGridParam({loadonce: false, datatype: 'json'});
                                                                                        $("#list2").trigger("reloadGrid");                                  
                                                                                        }, 

                                                        onClose: function(){$("#list2").trigger("reloadGrid");                                                                                  
                                                                                    $("#list2").setGridParam({loadonce: true});
                                                                                    $(".ui-icon-refresh").trigger('click');                                                                                 
                                                                                    }
                                                    });


  $(window).bind('resize', function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeGrids, 60);
    divwidth = $(".content-box-header").width() - 40;
    //alert(divwidth);
   $("#list2").setGridWidth(divwidth,true);

    }); 

    $(window).resize();
    $(".ui-icon-closethick").trigger('click');

});