JQGRID show blank instead of Null

Question

Am using JQGrid and am getting Null displayed in the grid as it comes from DB. I can change the query to return Blank value.

But am try to handle using JQGrid. How do i replace null by blank values in Grid.

I don want to show NULL to users instead show blank.

How do i achieve this in JQGrid ?

Thanks

Answer 1

It's probably best that you handle this server-side, but if you want to do it in jqGrid, you could use a custom formatter that converts null to the empty string. (I'm not sure if you are actually getting back the value null or the String "NULL", so I handled both cases):

var nullFormatter = function(cellvalue, options, rowObject) {
    if(cellvalue === undefined || isNull(cellvalue) || cellvalue === 'NULL') {
        cellvalue = '';
    }

    return cellvalue;
}

$("#myGridContainer").jqGrid({
    ....
    colModel: [{
        label: 'Name',
        name:'name',
        index:'name',
        formatter:nullFormatter
    }, {
        label: 'Next Column',
        name:'nextCol',
        index:'nextCol',
        formatter: nullFormatter
    }, ...],
    ....
}

Answer 2

I had the same problem.

Also, I wanted jqGrid to display my figures with thousand separators and 2 decimal places, but using the default 'number' formatter caused any nulls (from the database) to get displayed as "0.00" rather than being left blank.

$("#tblListOfRecords").jqGrid({
    ...
    colModel: [
      { name: "SomeNumber", formatter: 'number', sorttype: "integer", formatoptions: { decimalPlaces: 2 } }
    ]
    ...

This wasn't quite what I wanted.

My solution was to write my own formatter:

$("#tblListOfRecords").jqGrid({
    ...
    colModel: [
      { name: "SomeNumber", formatter: formatNumber}
    ]
});

function formatNumber(cellValue, options, rowdata, action) {
    //  Convert a jqGrid number string (eg "1234567.89012") into a thousands-formatted string "1,234,567.89" with 2 decimal places
    if (cellValue == "")
        return "";
    if (cellValue == null || cellValue == 'null')
        return "";

    var number = parseFloat(cellValue).toFixed(2);          //  Give us our number to 2 decimal places
    return number.toLocaleString();                         //  "toLocaleString" adds commas for thousand-separators.
}