Jqgrid dynamic filter with url data source

Question

I have a Jqgrid as follows:

 jQuery("#jQGridDemo").jqGrid({
            url: 'http://localhost:58404/JQGridHandler.ashx',
            colNames: ['Property ID', 'Property Ref', 'Short Address', 'Scheme Code', 'Scheme Name', 'Property Type', 'Tenure Type', 'Status', 'Management Cost','Rent Charge Month','SC Charge Month'],
            colModel: [
                        { name: 'PropertyID', index: 'PropertyID', width: 70, align: "left", stype: 'text', sortable: true},
                        {name: 'PropertyType',width: 80},
                        { name: 'TenureType', index: 'TenureType', width: 80, align: "center",  sortable: true },
                        { name: 'Status', index: 'Status', width: 75,  align: "center", sortable: true },
            ],

The grid works and is populated with the Json returned from the URL. However, I am trying to implement a dynamically populated drop-down-filter on the PropertyType column and have been looking at Oleg's answer here: How to add dynamic filter drop down using Jqgrid?

I have therefore added a "beforeProcessing" function:

 beforeProcessing: function (data) {
                var propertyMap = {}, propertyValues = ":All", rows = data.rows, i, symbol;
                for (i = 0; i < rows.length; i++) {
                    symbol = rows[i].Symbol;
                    if (!propertyMap.hasOwnProperty(symbol)) {
                        propertyMap[symbol] = 1;
                        propertyValues += ";" + symbol + ":" + symbol;
                    }
                }
                $(this).jqGrid("setColProp", 'PropertyType', {
                    stype: "select",
                    searchoptions: {
                        value: propertyValues
                    }
                }).jqGrid('destroyFilterToolbar')
                    .jqGrid('filterToolbar', {
                        stringResult: true,
                        searchOnEnter: false,
                        defaultSearch: "cn"
                    });
            },

My question is, how do I pass the data returned from the URL to the "beforeProcessing: function (data)" -

Any help would be appreciated.

It is already passed. Not Sure that I understand. To this event is passed the data from the server before it is inserted into the grid. Also there are some differences in different jqGrid versions regarding this event - actually which version of jqGrid is used - Guriddo jqGrid, free-jqGrid or jqGrid <= 4.7? — Tony Tomov
I am using version 4.5.1. The debugger is telling me that rows is null. So I assume the data is not being passed to the function before it is inserted into the grid. — Sanxion
What is your datatype? If the datatype is local it will not be passed in version 4.5. For this version the data is passed only if the datatype is json or xml. The problem does not exist in Guriddo jqGrid versions. — Tony Tomov
try to console.log the data. It is possible that data.rows property does not exist according to the jsonReader . just before the rows = data.rows. make a console.log of data only — Tony Tomov

Tony Tomov Tony Tomov · Accepted Answer · 2018-11-26T14:19:56

In case your data does not have a rows property you can modifiy your initial code like this:

 beforeProcessing: function (data) {
                var propertyMap = {}, propertyValues = ":All", rows = data, i, symbol;
                for (i = 0; i < rows.length; i++) {
                    symbol = rows[i].Symbol;
                    if (!propertyMap.hasOwnProperty(symbol)) {
                        propertyMap[symbol] = 1;
                        propertyValues += ";" + symbol + ":" + symbol;
                    }
                }
....

The only that differ from your original code is replacing

rows = data.rows

with

rows = data,

Jqgrid dynamic filter with url data source

1 Answers