Question

Background

I’ve picked up some incomplete work from another developer that involves displaying the results of a search. His approach was to render the results in an HTML table using inline Javascript and jQuery as follows.

I’m trying to finish off the work but I would prefer to write less code and use the jqGrid because it includes sorting functionality, and to get the code tidier. Getting the jqGrid to display the results is easy, but getting the radio buttons in a blank column is harder than I thought it would be.

The version of jqGrid in the application is 3.7.2. The grid needs to have radio buttons on the left for selection to keep things consistent with the rest of the application.

Where I’m stuck

There doesn’t seem to be a way to have an unbound column in jqGrid. That is, each column seems to need a field in the underlying data. If you do not have a dummy field, then the row data and column headers become misaligned.

I’ve come across an example (See Row Editing -> Custom Edit) that returns JSON with a dummy field in the data, and then modifies the grid data to insert buttons.

My preference is to not have the dummy data in there, because it feels dirty 🙂 I would like my JSON to only include the data it needs to represent the results of the search. So I was thinking that it would be better to add the dummy field in the script code instead in order to keep the code on the server side clean.

I’m trying to modify the data returned from the AJAX call before jqGrid renders it. I’ve tried hooking into the loadComplete event but when I modify the data it appears to be after it has already rendered.

I’ve also tried hooking into the success event on the ajaxGridOptions field of options but that seems to totally override the event and jqGrid doesn’t render the data.

How can I modify the data returned from a web service call before jqGrid renders it?

Answer 1

The solution in my previous answer broke sorting so I came up with another solution.

Because jqGrid doesn’t provide the hooks to conveniently modify the data, it was necessary to drop back a level and hook into jQuery. I replaced the $.ajax() method with my own. Firstly it checks whether the operation is one being initiated by jqGrid and if so, it pads the data, calls the original jqGrid success handler, and then adds the radio buttons to the grid. Sorting still works, the datatype is still json, and there are no manual calls to addJSONData and I am still able to achieve what I needed from the previous solution. Essentially, making this small jQuery hack allows me to get by without making any jqGrid hacks which is far messier.

// Set up $.ajax() hook for modifying the data before jqGrid receives it
if (!this._ajaxOverridden) {
    var oldAjax = $.ajax;
    $.ajax = function (options) {
        // Check whether this call is from jqGrid to our web service
        if (options.url == config.eventSearchUrl && options.success) {
            // Wrap the success event handler with our own handler that pads the data and creates the radio buttons
            var oldSuccess = options.success;
            options.success = function () {
                thisEventSearchDialog._padData(arguments[0]);
                oldSuccess.apply(this, arguments);
                thisEventSearchDialog._createRadioButtons();
            }
        }
        oldAjax(options);
    };
    this._ajaxOverridden = true;
}