What's the easiest way to display NULL value as empty string instead of "null" string in an ExtJS grid?

Question

I have a server-side script (PHP) returning JSON data to populate an ExtJS Grid.

This data comes from a MySQL query, containing some NULL values.

When PHP encodes it into the JSON notation, it keeps the NULL intact:

{"id":"33","name":"Test1","url":null,"cls":"x-tree-noicon","expanded":true}

But... when this data is displayed in the ExtJS grid, it shows a "null" string in the place of the NULL value.

I don't want it to display "null". I just want it empty (an empty string).

What is the easiest way to achieve this?

Thanks.

Answer 1

I'm not sure if the easiest but the first thing that comes to my mind is creating a custom renderer. You can use something like this:

function render(value){
    if(value === null){
        value = '';
    }
    return value;
}

Answer 2

WoLpH's answer is correct. My own question was somehow "incorrect"... :-)

In fact, I am dealing with a treegrid (Ext.ux.tree.TreeGrid), not a common ExtJS grid (Ext.grid.GridPanel).

The columns of the treegrid are not of Ext.grid.Column type, as the common grid. They are of Ext.list.Column type.

This means that the renderer configuration option does not apply (it exists and works on Ext.grid.Column, but not on Ext.list.Column).

To change the rendering of a Ext.list.Column, there is the tpl configuration option available, which uses the Ext.XTemplate mechanism.

Below, I share the configuration of my treegrid column that did what I wanted:

tpl: '<tpl if="url === null"></tpl><tpl if="url !== null">{url}</tpl>'

The configuration above made my column render an empty string for NULL values, instead of a "null" string, in the treegrid!

---

Final note: I voted on WoLpH's answer because it is correct. My question was misleading, and I preferred not to change/edit it, but to share my own findings as another answer. I also thank him because it made me focus on the right things. Thanks.

Answer 3

Your other option would be to handle it from the back end. You would need to check in the result set for any instances of NULL and convert them to empty strings before returning it back to the client.