jqGrid shows NULL data as "undefined"

Question

Having trouble with data coming from the server as nulls...in the jqGrid they show as "undefined".

My data source is server side XML, and looks like:

<?xml version="1.0" encoding="UTF-8"?>
<rows>
  <row id="0">
    <cell><![CDATA[0]]></cell>
    <cell><![CDATA[MENUBAR]]></cell>
    <cell><![CDATA[Main Menu]]></cell>
    <cell/>
    <cell/>
    <cell/>
    <cell><![CDATA[Y]]></cell>
    <cell><![CDATA[1]]></cell>
    <cell/>
    <cell/>
    <cell><![CDATA[1]]></cell>
  </row>
  <row id="1">
    <cell><![CDATA[1]]></cell>
    <cell><![CDATA[PCHN_MGT]]></cell>
    <cell><![CDATA[Channel Maanagement]]></cell>
    <cell/>
    <cell/>
    <cell/>
    <cell><![CDATA[Y]]></cell>
    <cell><![CDATA[1]]></cell>
    <cell/>
    <cell/>
    <cell><![CDATA[2]]></cell>
  </row>

Note the empty cell values, these are the NULLs.

Here is my jqGrid setup:

$(document).ready(function () {  
// Grid
$(function(){ 
  $("#list1").jqGrid({ 
    url:'!wspitm.P_PITM_LIST_XOUT',
    datatype: 'xml',
    editurl: "!wspitm.P_PITM_LIST_POST",
    gridview: true,
    mtype: 'GET',
    prmNames: {page:"page", rows:"rows", sort: "sidx", order: "sord", search:"isearch", nd:"nd", id:"id", oper:"oper", editoper:"edit", addoper:"add", deloper:"del", subgridid:"id", npage: null, totalrows:"totalrows"},
    pager: "#pager",
    rowNum: 10,
    rowList:[10,20,50],
    viewrecords: true,
    caption: 'Portal Item List',
    sortorder: "asc",
    width: "1100",
    height: "250",
    sortname: "WWBPITM_SURROGATE_ID",
colModel:[ 
{
name:"WWBPITM_SURROGATE_ID", 
align:"left", 
index:"WWBPITM_SURROGATE_ID", 
editable: false, 
edittype: "text", 
editrules: { required: false, edithidden: true }, 
formoptions: { label: "ID" }, 
formatter: "", 
label:"ID", 
sortable: true, 
width:15, 
classes: "" 
}
 ,
{
name:"WWBPITM_TITLE", 
align:"left", 
index:"WWBPITM_TITLE", 
editable: true, 
edittype: "text", 
editoptions: { size: 255 }, 
editrules: { required: true }, 
formoptions: { label: "Title" }, 
formatter: "", 
label:"Title", 
sortable: true, 
width:50, 
classes: "" 
}
 ,
{
name:"WWBPITM_SUBTITLE", 
align:"left", 
index:"WWBPITM_SUBTITLE", 
hidden: true, 
editable: true, 
edittype: "text", 
editoptions: { size: 255 }, 
editrules: { required: false }, 
formoptions: { label: "Sub-Title" }, 
formatter: "", 
label:"Sub-Title", 
sortable: true, 
width:75, 
classes: "" 
}

etc. etc.

I tried using a custom formatter to convert undefined to "" (like this JQGRID show blank instead of Null) but that isn't working either.

Any ideas what I'm doing wrong?

Answer 1

I tried the code, but I can't reproduce the problem. See the demo. I would strictly recommend you to remove formatter: "". It produces exception on building of every cell content, but the displayed results are still OK. It's very bad to include the values of different possible properties in colModel. It makes not only the code bad readable, but it could be origin of different errors. The column definition

{
    name:"WWBPITM_SURROGATE_ID", 
    align:"left", 
    index:"WWBPITM_SURROGATE_ID", 
    editable: false, 
    edittype: "text", 
    editrules: { required: false, edithidden: true }, 
    formoptions: { label: "ID" }, 
    formatter: "", 
    label:"ID", 
    sortable: true, 
    width:15, 
    classes: "" 
}

can (and should) be reduced to the following

{
    name: "WWBPITM_SURROGATE_ID",
    label: "ID",
    width: 15
}