[Solved] Error while initializing datagrid with JSON object

[Darrel]

Hello,

I'm trying to create a datagrid using JSON objects by referring the example from the following jsfiddle
http://jsfiddle.net/H5rkg/. But I'm facing a error on intializing the datagrid, "Unable to get property 'width' of undefined or null reference" error.

The code and the JSON string that I've used are below.


I've declared my datagrid table in the body tag of my html page as follows:

Code:

<TABLE id="RESULTS_TABLE"></TABLE>

.

This is my json string returned on an ajax call on load, which is a valid JSON string. I've verified the string at http://jsonlint.com/:

Code:

'{"COL_LIST":{"COL_DATA":[{"field":"col_0","title":"Column 0"},{"field":"col_1","title":"Column 1"},{"field":"col_2","title":"Column 2"},{"field":"col_3","title":"Column 3"},{"field":"col_4","title":"Column 4"},{"field":"col_5","title":"Column 5"},{"field":"col_6","title":"Column 6"},{"field":"col_7","title":"Column 7"},{"field":"col_8","title":"Column 8"},{"field":"col_9","title":"Column 9"},{"field":"col_10","title":"Column 10"},{"field":"col_11","title":"Column 11"},{"field":"col_12","title":"Column 12"},{"field":"col_13","title":"Column 13"},{"field":"col_14","title":"Column 14"}]},"ROW_LIST":{"ROW_DATA":[{"col_0":"A03","col_1":"DS0001","col_2":"1004","col_3":"RUFF","col_4":"6","col_5":"150","col_6":"15\/09\/2015","col_7":"PWD","col_8":"22800","col_9":"0","col_10":"0","col_11":"22800","col_12":"RUFF","col_13":"VALUE","col_14":"UK"},{"col_0":"A03","col_1":"DS0004","col_2":"1004","col_3":"RUFF","col_4":"7","col_5":"12","col_6":"15\/09\/2015","col_7":"PWD","col_8":"1440","col_9":"0","col_10":"0","col_11":"1440","col_12":"RUFF","col_13":"VALUE","col_14":"UK"}]}}'

This is my javascript function that is called after the ajax call is completed, where I pass the JSON string as a parameter and then parse it to a JSON object:

Code:

function createDataGrid(data)
{
data = JSON.parse(data);

var col_data;
var row_data;

for (var key in data) {
//alert("Key: " + key);
var val = data[key];

for(var child_key in val)
{
alert("key: " + child_key + "\nvalue: " + val[child_key]);
if(child_key == "ROW_DATA")
{
row_data = JSON.stringify(val[child_key]);
//row_data = JSON.parse(val[child_key]);
alert("row_data: " + row_data);
}
if(child_key == "COL_DATA")
{
col_data = val[child_key];
//col_data = JSON.parse(val[child_key]);
alert("col_data: " + col_data);
}
}
}

//I get the error in this next step
$('#RESULTS_TABLE').datagrid({
columns: col_data,
data: row_data,
height: '100px'
});
}

Please could anyone tell me what could be wrong in the code that's leading to this error.....

Thanks in advance.

Regards,
Darrel

[stworthy]

Please try this code instead:

Code:

    $('#RESULTS_TABLE').datagrid({
        columns: [col_data],
        data: JSON.parse(row_data),
        height: '100px'
    });

[Darrel]

Hello stworthy,

Thanks a lot. It worked!!! 

God bless you!!!!!

Regards,
Darrel