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!

Hendecagon

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');

});

Hendecagon

Answer 2

If you look at the below code I'm doing a search between two dates on the toolbar, "e" is the Id of my control I'm using. Now the key factor is the property called "search", if you set this to "true" it will do a client search, false will do a remote search to whichever ajax method you would call for your search.

        var gridFilter;
        var fieldId = e.replace('#', '');
        var fieldForFilter = fieldId.replace('gs_', '');//All toolbar filters Id's are the same as the column Id but prefixed with "gs_"
        var splitteddates = $("#" +fieldId).val().split('-');
        var grid = $("#GridJq1");
        gridFilter = { groupOp: "AND", rules: [] };
        gridFilter.rules.push({ field: "" + fieldForFilter + "", op: "gt", data: "" + $.trim(splitteddates[0]) + "" });
        gridFilter.rules.push({ field: "" + fieldForFilter + "", op: "lt", data: "" + $.trim(splitteddates[1]) + "" });
        grid[0].p.search = true;//specifies wether to do a client search or a server search which will be done manually. true=client search
        $.extend(grid[0].p.postData, { filters: JSON.stringify(gridFilter) });//combine post data and newly added filter data
        grid.trigger("reloadGrid", [{ page: 1, current: true}]);//reset to page and keep current selection if any

If I recall correctly, part of the above code for building the search is from an answer from the famous JQGrid Oleg so kudos to him if this was part of his code.

Zavala

Thanks for your input jjay225 but I do not understand how this/your-code is relevant in my case. Could you please elaborate a little. – Hendecagon

No worries, what I'm doing there is altering the postData property "_search" so when you are searching the grid automatically knows not to search client side. So what you could do is just use these two lines in whatever search function you use: var grid = $("#GridJq1"); grid[0].p.search = false; You are going to perform an ajax call for your search aren't u? I take you going to have to specify which columns etc you are searching on? – Zavala