DHtmlXGrid only displays first column from JSON data

Suite and Optimus Suite 5
#1

I have tried to load JSON data from a ASP.NET Web Api method using both the load() and parse() method. Either way, the grid only displays the first column of information.

I have all the appropriate files included.

<link rel="stylesheet" type="text/css" href="include/javascript/dhtmlx/dhtmlxGrid/dhtmlxgrid.css"/> <link rel="stylesheet" type="text/css" href="include/javascript/dhtmlx/dhtmlxGrid/skins/dhtmlxgrid_dhx_skyblue.css"/> <script language="javascript" type="text/javascript" src="include/javascript/dhtmlx/dhtmlxGrid/dhtmlxcommon.js"></script> <script language="javascript" type="text/javascript" src="include/javascript/dhtmlx/dhtmlxGrid/dhtmlxgrid.js"></script> <script language="javascript" type="text/javascript" src="include/javascript/dhtmlx/dhtmlxGrid/dhtmlxgridcell.js"></script> <script language="javascript" type="text/javascript" src="include/javascript/dhtmlx/dhtmlxGrid/ext/dhtmlxgrid_start.js"></script> <script language="javascript" type="text/javascript" src="include/javascript/dhtmlx/dhtmlxGrid/ext/dhtmlxgrid_srnd.js"></script> <script language="javascript" type="text/javascript" src="include/javascript/dhtmlx/dhtmlxGrid/ext/dhtmlxgrid_filter.js"></script> <script language="javascript" type="text/javascript" src="include/javascript/dhtmlx/dhtmlxGrid/ext/dhtmlxgrid_json.js"></script>

Here is my grid setup (JS)

[code]var grid = new dhtmlXGridObject(‘gridbox’);

grid.setImagePath("./include/javascript/dhtmlx/dhtmlxgrid/imgs/");
grid.setHeader("Document, Date Converted, Old File, New File, Backup Path");
grid.setInitWidths("100,100,250,150,100");
grid.setColAlign("left,left,left,left,left");
grid.setColTypes("rotxt", "rotxt", "rotxt", "rotxt", "rotxt");
grid.setColSorting("str,str,str,str,str");
grid.setSkin('dhx_skyblue');
grid.init();

service.getPDFServiceHistory(function(data) {
    grid.parse(data, 'json');
});[/code]

And here is the returned JSON:

{ "rows": [ { "id": 1, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 2, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 3, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 4, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 5, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 6, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 7, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 8, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 9, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 10, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 11, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/18/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 12, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/18/2016 12:00:00 AM", "F:\\test", "f:test", "f:test" ] }, { "id": 13, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/17/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 14, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/17/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 15, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/17/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 16, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/17/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 17, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/17/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 18, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/17/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 19, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/17/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 20, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/16/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 21, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/16/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 22, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/16/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 23, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/16/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 24, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/16/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 25, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 26, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 27, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 28, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 29, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 30, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 31, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 32, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 33, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 34, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 35, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 36, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 37, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 38, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 39, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 40, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 41, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 42, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 43, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 44, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 45, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 46, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 47, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 48, "data": [ "c89cabe5-c973-4acf-b3b5-22d38e3408e2", "2/15/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 49, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/14/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 50, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/14/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 51, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/14/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 52, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/14/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 53, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/14/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 54, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/14/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 55, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/14/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] }, { "id": 56, "data": [ "447d7943-25fd-430b-a83e-246d119b014c", "2/14/2016 12:00:00 AM", "F:\\Test", "F:\\Test", "F:\\Test" ] } ] }

#2

Unfortunately the problem cannot be reproduced locally.

The only found mistake is:
grid.setColTypes(“rotxt”, “rotxt”, “rotxt”, “rotxt”, “rotxt”);
please, try toreaplace it with:
grid.setColTypes(“rotxt,rotxt,rotxt,rotxt,rotxt”);

#3

I had the exact same problem and was banging my head for over an hour.
Turns out that if you do, e.g.:

grid.setColTypes("ro, ro, ro");

This causes DHTMLX to only display the first column. Moreover, no warning or error message is printed on the console :smiling_imp: :angry:
So instead you have to do:

grid.setColTypes("ro,ro,ro");

(notice the lack of spaces after the commas). I consider this a BUG given that DHTMLX doesn’t print any kind of warning or error message on the console. Moreover every coder is used to leaving a space after commas. Furthermore, method setColAlign accepts spaces after commas just fine. Definitely a bug.

1 Like
#4

Man
 I kept debugging dhtmlx code to see why I was seeing data in one column only
 Thanks for sharing this


Saved my day