Question

So I have a jqGrid on an ASP.NET MVC 3 website. It’s loading the data, searching, filtering, and saving rows with the built in pop-up editor. What I can’t get to work is saving a nullable property. I’m using LargeJsonResult instead of the built in JsonResult, so an example of a row in the grid is this:

// C# class
public class Row
{
    public string A { get; set; }
    public string B { get; set; }
    public int C { get; set; }
}

// an example object instance, let's say these values come from the DB
var ret = new Row { A = "a", B = null, C = 5 };

// the JSON string sent to the grid will look like this (notice B is omitted)
// "{ A: 'a', C: 5 }"

Now, the grid will show this as:

A   B          C
a   undefined  5

And this brings me to my problem. The pop-up edit form will show “undefined” in the textbox for B, and will also post this to the server. So if I save that to the database, I’ll have “undefined” in my DB instead of null.

How do I get jqGrid to preserve the null value round trip? One solution that seems to me very hacky is based on something Oleg solved in another thread:

// override jqGrid serialization
jQuery.extend(jQuery.jgrid.edit, { ajaxEditOptions: { contentType: "application/json" }, serializeEditData: function (data) {
    return JSON.stringify(data).replace(/"undefined"/g, 'null');
}});

This will work, but seems dangerous because it’s doing mass edits of data without the user’s knowledge. In thinking more about it, I guess this is the fundamental problem of saving back null instead of “undefined” or some other string representation of null (empty string, etc.). The desired behavior would be:

• if the property is null, and the user doesn’t change the value, it posts as null
• if the user changes the value, the property is no longer null

Can we get the grid’s edit form to behave like this for nullable properties? Or would I have to create a custom edit form that tracks what the user does with a property?

Answer 1

I hope that I understand your problem. In one my applications where I used jqGrid I had once the problem with NULL values. At the time of development of the application I was not sure how to solve the problem and I placed on the server side the text value “(NULL)” instead of null value of one property. The grid was for advanced users who understand what “(NULL)” is. The value “(NULL)” has no sense in the field (one had no user account with the name) and inside of server code for the Edit operation I could distinguish “(NULL)” value from the real field value. In the way I could come over the problem.

In your case you should solve at least two problems:

1. You should decide how the null value should be displayed. The “undefined” text seems me not the best one. You can solve the problem with the “undefined” text either on the server side (like I did in my case) or with respect of custom formatter. The custom formatter is very simple thing. It define how a cell value should be displayed as a HTML fragment of the <td> contain. You can for example include an additional hidden <span> element or other HTML element or attribute which will save the information that the value was null.
2. You should solve the problem with decoding of the null value on the server side during Edit operations. You can solve the problem very easy on the server side (like I do with compare of the corresponding field to the “(NULL)”) or with respect of custom unformatter on the client side. The custom unformatter will get the information from the grid cell (from the hidden <span> or other hidden HTML element or attribute) and place the information in the server request.

You can look at the demo for the answer to see an example how one can use a hidden <span> to save an additional information in the cell with respect of custom formatter and to read the information later with respect of custom unformatter.