0

I have implemented the autocomplete filter functionality in my jqGrid. However this is not working, I believe there are 2 issues.

I have a column which uses a formatter. With this column included, the filtering will not trigger a load at all. Without this column, the filtering will trigger a load, however will not filter the results.

I have read that the index or jsonmap must be the same as the name in the colModel in order for filtering to work. I have ensured that these match, still with no luck.

Code: 

    loadData: function (someData) {

    $(model.table).GridUnload();

    $(model.table).jqGrid({
        url: $(model.tableURL).val(),
        datatype: 'JSON',
        mtype: 'POST',
        postData: {
            someData: someData
        },
        emptyrecords: 'No Wholesalers',
        viewrecords: true,
        autowidth: true,
        shirnkToFit: false,
        rowNum: -1,
        loadtext: 'Loading...',
        multiselect: false,
        width: "100%",
        height: "100%",
        colModel: [
         { label: 'Wholesaler', name: 'WholesalerName', jsonmap: 'WholesalerName', sortable: false, align: 'center', width: '250' },
          {
              label: 'Amount Complete', name: 'PercentageComplete', jsonmap:'PercentageComplete', search: false, sortable: false, align: 'center',
              formatter: function (cellvalue, options, rowObj) {
                  return '<div class="progress progress-striped pos-rel" data-percent="' + rowObj.PercentageComplete + '%">' +
                      '<div class="progress-bar progress-bar-success" style="width:' + rowObj.PercentageComplete + '%;"></div></div>';
              }
          },
         { label: 'No of Customers', name: 'NoOfCustomers', jsonmap: 'NoOfCustomers', search: false, sortable: false, align: 'center' },
         { label: 'Last Updated', name: 'LastUpdated', jsonmap: 'LastUpdated', search: false, sortable: false, align: 'center' },
         { label: 'Last Update By', name: 'LastUpdateBy', jsonmap: 'LastUpdateBy', search: false, sortable: false, align: 'center' },
        ],
        altrows: true,
        loadComplete: function () {
            var table = this;

            //model.update()
        },
        loadError: function (xhr, st, err) {
            alert(err);
        }
    }
    ).jqGrid('filterToolbar', {
        stringResult: true, searchOnEnter: false, ignoreCase: true,

    })
},
DNKROZ
  • 2,634
  • 4
  • 25
  • 43
  • Which version of jqGrid you use (can use) and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? How many rows you need to display in the grid approximately? The usage of `loadonce: true` scenario can simplify your code. Test JSON data would be good to include too (2-3 rows are enough). If you include formatter, then you should include `unformat` too. Probably `sorttype` as function would be good to use. You wrote about Autocomplete, but not included the code. – Oleg Jan 20 '17 at 18:02
  • One typical problem with autocomplete could be the requirement to trigger additional `.change()` event inside of `select` callback of autocomplete. In any way, one need to know more implementation details to be able to help you. – Oleg Jan 20 '17 at 18:05
  • One more important remark: you should fix `rowNum: -1` line if you use `loadonce: true` and an old jqGrid. – Oleg Jan 20 '17 at 18:13
  • I'm not sure about the version. Sorry by autocomplete I meant filtering as you type, this may have been confusing. Yes I've taken `rowNum: -1` out now. I didn't know `unformat` existed, I will check this out. Thank you – DNKROZ Jan 23 '17 at 08:18
  • If you open `jquery.jqgrid.min.js` in a text editor you will see the version and the name of the product and the license agreement in the comment at the beginning of the file. I develop [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork, which can be used for free under MIT/GPLv2 licenses. Commercial Guriddo license and the price can be seen [here](http://guriddo.net/?page_id=103334). I don't support Guriddo. `unformat` is described in [the old documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter#unformatting) – Oleg Jan 23 '17 at 08:27
  • Ah I see - it's version 4.6.0. I'm guessing `sorttype` can be used to return my actual data so that my grid can be filtered correctly? as it is currently trying to filter on the html data returned by the formatter – DNKROZ Jan 23 '17 at 08:28
  • jqGrid 4.6 was published about 3 years ago. I recommend you update to the current version (4.13.6) of free jqGrid, which is upwards compatible with jqGrid 4.6 and it can be used under the same licenses. The version jqGrid 4.6 is dead now. After the next release there are exist two *alternative forks*: "free jqGrid" and "Guriddo jqGrid JS". The new features of free jqGrid are described in the READMEs to every published version. Someone are described in [the wiki](https://github.com/free-jqgrid/jqGrid/wiki) and [here](https://free-jqgrid.github.io/getting-started/index.html). – Oleg Jan 23 '17 at 08:36
  • Thanks for the information. This is a large company application and therefore certain points would need to be considered before we upgrade and make it live. – DNKROZ Jan 23 '17 at 08:39
  • It's clear. I just inform you. You should make **the choice between the current version (4.13.6) of free jqGrid, the current version (5.2.0) of Guriddo jqGrid JS and the usage of an alternative product to jqGrid**. You can test free jqGrid by loading it from CDN (see [the wiki](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs)). You will need just temporary change 3 lines of HTML code, which loads jqGrid files. Thus it's easy to test *technical* part of migration. – Oleg Jan 23 '17 at 09:01
  • The usage of old jqGrid 4.6 now has risks. See the problem described in [the answer](http://stackoverflow.com/a/10621951/315935). jqGrid wrong rendered in the next version of Chrome. The bug could be fixed in jqGrid code only. jqGrid 4.6 was published at the time of Chrome 32 and Firefox 27. We have now Chrome 55 and Firefox 50.1. New version will be published every 2-3 months. **One has the risk, that jqGrid 4.6 can break working after publishing of any new version of Chrome of Firefox, like it was after publishing Chrome 19.** You should just inform your manager about the problem – Oleg Jan 23 '17 at 09:02
  • Didn't realise that. We currently use 1 version of a browser which is industry standard but this will most likely be upgraded in the future. Therefore it would be good to get everything updated properly. I will bring this issue up in the meeting today and hopefully get it upgraded – DNKROZ Jan 23 '17 at 09:05
  • I mean that **web browsers** will be updated and some fixes of jqGrid could be required to fix the compatibility problems with new web browsers. In any way, it's *your choice* and your risk. I get no money from the usage of free jqGrid. – Oleg Jan 23 '17 at 09:07
  • I understand that, the issue will probably arise when we look to update our web browser version, therefore we will also need to update jqGrid – DNKROZ Jan 23 '17 at 09:10
  • Chrome don't support any previous version after publishing new one (see [FAQ](https://www.chromium.org/administrators/frequently-asked-questions): **"We only support the most current stable channel release. Older releases are not supported."**). Thus one *have to* migrate to the next version of Chrome every 2 months. Moreover, Chrome be used on more as 50% of computers wordwide (see [here](http://gs.statcounter.com/#browser-ww-monthly-201701-201701-bar), for example). If your web application want support Chrome, then you have to support the *latest version* of Chrome. – Oleg Jan 23 '17 at 09:24

1 Answers1

0

Turns out I didn't have loadonce: true set.

Therefore when filtering on keypress, the grid was being reloaded and re populated with data from the server.

DNKROZ
  • 2,634
  • 4
  • 25
  • 43