How to parse NULL value returned using YUI datasource

Question

I am using YUI datatable and datasource to render data in one of my projects. The data returned happens to be NULL and YUI datasource is unable to parse it.

Below is the declaration code of datasource and datatable. For readability sake, I am seperating each of the declarations.

Column Descriptions declaration

            var columnDescription = 
      [
    {key:'Requirements'},
    {key:'abc'},
    {key:'xyz'}
       ];

This columnDescription is set in the function below.

DataSource Declaration

var dataSrcSample = new YAHOO.util.FunctionDataSource(getDataGrid);
       myDataSource.connMethodPost = true;
       myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
             myDataSource.responseSchema = {
                 fields:['Requirements', 
{key:'abc',parser:YAHOO.util.DataSource.parseString},
 {key:'xyz',parser:YAHOO.util.DataSource.parseString}]
                 };

getDataGrid function makes the call to server side to get the data from the server. Below is the table definition itself.

  YAHOO.example.sampleTable = function()
  {
                           var columnDesc=columnDescription;
   var myDataSource = dataSrcSample;
   var oConfigs = 
   {
    width:'100%'
   };

   var myDataTable = new YAHOO.widget.DataTable("tableContainerDiv", 
columnDesc,
 myDataSource,
 oConfigs);
      }();

tableContainerDiv is declared in the html page. This is the container div. The function that gets the JSON data from server.

function getDataGrid()
{
      //calls backend and gets the data
}

The function is returning json string that has some null values. Datasource constructor is complaining following problems.

• ERROR_DATAINVALID
• ERROR_DATANULL

I checked the yui documentation and found that the string parser does not parse null values. I am wondering if there is any way to parse this data. Do I have to handleResponse parse the raw data? Any suggestions appreciated.

Answer 1

First make sure that you need parser:YAHOO.util.DataSource.parseString for the fields. I haven't seen your JSON structure. So I cannot comment on this.

Other option is to use a custom formatter. Something like the following snippet will work.

var customFormatter = function(elCell, oRecord, oColumn, sData) {
    elCell.innerHTML = '';
    try {
        var strData = YAHOO.lang.JSON.parse(sData);
        // set the elCell.innerHTML based on the strData 
    } catch {
        // don't to anything
    }
}

myDataSource.responseSchema = {fields:['Requirements', 'abc', 'xyz']};

var columnDescription = 
                    [
                        {key:'Requirements'},
                        {key:'abc',
                         formatter: customFormatter
                        },
                        {key:'xyz',
                         formatter: customFormatter
                        }
                     ];