Grid doesn't get populated with data

Suite and Optimus Suite 5
#1

As stated, my grid doesn’t get populated with data, only the table headers show up.

<div class="modal">
    ...
    <div class="import-configuration-status-grid" id="import-configuration-status-grid"></div>
    ...
</div>
<script type="text/javascript">
    var importConfigurationStatusGrid = new dhtmlXGridObject('import-configuration-status-grid');
</script>

<script type="text/javascript">
    function displayImportConfigurationStatus(result) {
            importConfigurationStatusGrid.setHeader("Error name, Filename");
            importConfigurationStatusGrid.setColAlign("right,left");
            importConfigurationStatusGrid.setColTypes("ro, ro");
            importConfigurationStatusGrid.setColSorting("str,str");
            importConfigurationStatusGrid.enableResizing("false, false");
            importConfigurationStatusGrid.init();

            importConfigurationStatusGrid.parse(JSON.stringify(result), "json"); // also tried "js" instead of "json"
    }

    $.ajax({
                url: formURL,
                type: 'POST',
                data: new FormData($('form')[0]),
                cache: false,
                processData: false,
                contentType: false,
                success: function (result) {
                      // once I get the response, I display the result in the grid
                      displayImportConfigurationStatus(result);
                },
                error: function (xhr, ajaxOptions, thrownError) {

                }
    });
</script>

// the response looks like this:
{“rows”:{“Conflicting”:[“TASK_SPEC/UserTask_1z12qfq.json”]}}

I also tried the example posted in the following link: https://docs.dhtmlx.com/grid__basic_initialization.html with following modifications:

function displayImportConfigurationStatus(result) {
            importConfigurationStatusGrid.setHeader("Error name, Filename");
            importConfigurationStatusGrid.setColAlign("right,left");
            importConfigurationStatusGrid.setColTypes("ro, ro");
            importConfigurationStatusGrid.setColSorting("str,str");
            importConfigurationStatusGrid.enableResizing("false, false");
            importConfigurationStatusGrid.init();

            data = {
                rows:[
                    {data : ["Foo", "Bar"]},
                    {data : ["Foo", "Bar"]},
                    {data : ["Foo", "Bar"]}
                ]
            };
            importConfigurationStatusGrid.parse(data, "json");
    }

But then I get the following error:
Uncaught TypeError: xml.getElementsByTagName is not a function

#2

Unfortunately the problem cannot be reproduced locally.
The following snippet works well (note that you need to add the ads to your rows for the correct rendering):
snippet.dhtmlx.com/a3e1ec8f6
If the problem still occurs for you please, share with a demo link or the complete demo, where the problem can be reconstructed locally.

#3

Found the fix after reading this post: forum.dhtmlx.com/viewtopic.php?f=2&t=50320

By setting the height of the grid container(the div where the grid is placed), the content of the grid started showing up.