Rows are missing from DHTMLX Grid

Question

Using DHTMLX Pro i'm trying to add rows to my table. The header part is loading fine, but other rows are not loaded in the table. Here is my code,

Using Require.js included

'dhtmlxcommon',
'dhtmlxgrid',
'dhtmlxgridcell'

My render function loads the Grid view as follows:

render: function(){
    var self = this;
    this.mygrid = new dhtmlXGridObject('grid-layout');
    this.mygrid.setImagePath('../dhtmlx/imgs/');
    this.mygrid.setHeader("ID,Name,Format");
    this.mygrid.setColAlign("center","center","center");
    this.mygrid.setSkin('dhx_skyblue');
    this.mygrid.init();
    data={
        rows:[
            { id:1, data: ["Foo", "Gates", "100"]},
            { id:2, data: ["Bar", "Tom", "1000"]},
            { id:3, data: ["Rain", "Henry", "-200"]}
        ]
    };

    //var newId = (new Date()).valueOf();
    //this.mygrid.addRow(newId,"1,2,3,4,5,6,7,8"); // This does not add a row
    this.mygrid.parse(data,"json"); // This does not add a row either
},

Not sure why table rows are not added using addRow or mygrid.parse.

Answer 1

The code looks correct. Check the size of 'grid-layout' container. It must have some non-zero height, or data part of grid will not be shown.