1

I have a jqGrid that I'd like to be able to load up with filters already applied (will probably be passed in through the URL). For testing I am hardcoding the filters, but I can't get that to work. I am trying to follow the answer here to get this to work.

My grid code (with some columns removed for simplicity):

<script type="text/javascript">
$(function(){
    $("#users").jqGrid({
            datatype: 'json',
            url: 'myLoadURL',
            gridview: true,
            loadonce: true,
            colModel: [ 
                {name: 'lastname', label: 'Last Name'},
                {name: 'firstname', label: 'First Name'},
                {name: 'email', label: 'Email'}
              ],
            height:'auto',
            autowidth:true,
            caption:'Users',
            rowNum:20,
            rowList:[10,20,50],
            ignoreCase: true, // case-insensitive filtering
            pager: '#pager',
            postData: {
                filters: '{"groupOp":"AND",rules:[{"field":"lastname", "op":"cn", "data":"smith"},{"field":"firstname","op":"cn","data":"john"}]}' 
            },
            search:true
        });
    $("#users").jqGrid("filterToolbar", {searchOnEnter: false});
});
</script>

<table id="users"><tr><td></td></tr></table> 
<div id="pager"></div>

In this case I'm trying to filter on users with firstname containing "John" and lastname containing "Smith". All the records are loaded, though. How can I get the initial filter values to apply?

Community
  • 1
  • 1
froadie
  • 79,995
  • 75
  • 166
  • 235
  • Do you implemented **server side filtering** in your server code (`myLoadURL`)? Do you want to load the data already filtered on the server and then use ` loadonce: true` to set *other filters* and do *local* sorting, paging and filtering? How many rows will be returned totally in the grid (100, 1000, 10000, 1000000)? – Oleg Nov 17 '15 at 08:19
  • @Oleg - no server side filtering, I'm using `loadonce:true`. All the filtering/sorting/paging is done on the front-end. The grid contains around 16,000 rows. I'm trying to determine if there's a way to apply a filter before the data is all loaded up in the grid. – froadie Nov 17 '15 at 08:21

1 Answers1

0

You have two main ways to apply local filter:

  • set the filter (postData.filters) and the option search: true and reload jqGrid directly after the first loading of data from the server.
  • load the data from the server using separate jQuery.ajax call and create the grid using datatype: "local", data: dataReturnedFromServer, search: true, postData: {filters: ...}.

The total number 16,000 of the rows in the grid is relatively large, but it could be still displayed quickly enough if you use modern web browsers and the latest versions of jqGrid (for example free jqGrid 4.10.0). The large number of columns could be also very important for the performance of the grid.

To follow the fisrt approach one can include the following loadComplete callback in the grid:

loadComplete: function () {
    var $this = $(this), p = $this.jqGrid("getGridParam");
    if (p.datatype === "json") {
        // we are loading the data from the server.
        // we should allow jqGrid to process loadComplete
        // till the end, change datatype to "local" and
        // only after that we should reload the grid once more
        // using locally sorted and filterd data
        setTimeout(function () {
            p.search = true;
            p.postData.filters = '{"groupOp":"AND",rules:[{"field":"lastname", "op":"cn", "data":"smith"},{"field":"firstname","op":"cn","data":"john"}]}';
            $this.triggerHandler("reloadGrid");
        }, 50);
    }
}

You can improve a little performace by usage rowNum:1 initially and setting p.rowNum = 20; before reloading. The only disadvantage of the first approach is small flicking of the grid content.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks! I added your loadComplete callback code and it does work. 2 issues: 1) It actually loads the entire grid and then applies the filter. I'd prefer to apply the filter before even loading the results, and 2) It doesn't actually show the filters applied in the filter inputs. (This may not be an issue, but if we would want it to display, how would we accomplish that?) – froadie Nov 17 '15 at 09:25
  • (Asking because if it turns out that there's no way to easily filter before displaying the results, we may just move the filtering/paging/sorting to the DB side instead of using `loadonce`, as it currently takes 15 seconds to load the grid with all the records.) – froadie Nov 17 '15 at 09:28
  • @froadie: Implemention **server side filtering** could be the good choice for 16000 rows of data. To apply the filter from `postData.filters` in the filter toolbar you can use `refreshSerchingToolbar` method which I posted in [the old answer](http://stackoverflow.com/a/6884755/315935). See [one more answer](http://stackoverflow.com/a/31663268/315935) for a little more resent code. It's important don't to forget that you can refresh the filter toolbar (fill the data in the toolbar) only after the seraching toolbar is created by `filterToolbar`. – Oleg Nov 17 '15 at 09:37
  • Thanks, that would solve my second issue (although the function seems complex). What about the first issue which is more critical - how can I apply the filter before loading the results? – froadie Nov 17 '15 at 09:42
  • @froadie: Sorry, but I don't understand what you mean. "apply the filter **before loading** the results" can means only server side filtering of the data because jqGrid *loads the data with respect of jQuery.ajax call*. "Before loading" can be done only on the server side. Thus your server code should test for `_search=true` and `filters` parameters and returnes the data **filltered corresponds to `filters`**. – Oleg Nov 17 '15 at 09:46
  • @froadie: One other important remark: I would you strictly recommend to debug (start profiler in Chrome or Internet Explorer) **to mesure**, what get the 15 seconds of time in your case. I created [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/performane-16000-20-free-jqgrid.htm) for you, which you can use to see the performance of working with 16000 rows and the page with 20 rows. You can try to sort, filter. The performance is a little different in different web browsers, but loading of 16000 rows of data (espesially gziped) should be quickly enough and local filtering is quickly too. – Oleg Nov 17 '15 at 12:24
  • around half of the time seems to be just loading up the data from the DB, without using the grid at all. We may just move all the filtering/sorting/searching to the server side – froadie Nov 18 '15 at 07:12
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95411/discussion-between-oleg-and-froadie). – Oleg Nov 18 '15 at 07:27