Cells collapsed and opened again deletes the grid inside the cell

Suite and Optimus Suite 8
#1

Hi,
I have a collection of cells in my layout that are all collapsible and have grids containing information in them. However, when I collapse a cell and then open it back up, the grid in the cell disappears. Is there a way around the cell deleting the grid when collapsed?

#2

Could you please, provide a a complete demo, where the problem can be reconstructed locally?

#3

Here is a demo that replicates the problem. In my actual code, I read the data from a json file.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My DHTMLX App</title>
        <!-- Include DHTMLX CSS -->
        <link rel="stylesheet" type="text/css" href="suite.css">

        <!-- Include DHTMLX JavaScript -->
        <script type="text/javascript" src="suite.js"></script>

        <!-- Optionally, include other DHTMLX dependencies if needed -->
    </head>
    
    <body>
      <div id="layout" class="custom"></div>
    </body>
</html>
<script>
    const layout = new dhx.Layout("layout", {
        type: "space",
        height: "2000",
        rows: [
            {
                header: "Season High Scores",
                collapsable: "true",
                id: "SHS",
                resizable: "true", 
                height: "400"    
            }
        ]
    });
    
    const dataset = [
        {
            "id": 0,
            "ScoreName": "info",
            "ScoreDetail":"info"
        },
        {
            "id": 1,
            "ScoreName": "info",
            "ScoreDetail":"info"
        },
    ];

    const grid = new dhx.Grid("SeasonsHighScores", {
        columns: [
            { id: "ScoreName", header: [{ text: "ScoreName" , align: "center"}], align: "center" },
            { id: "ScoreDetail", header: [{ text: "ScoreDetail", align: "center" }], align: "center" }
        ],
        adjust: true,
        data: dataset
    });
    layout.getCell("SHS").attach(grid);

  </script>
#4

const grid = new dhx.Grid(“SeasonsHighScores”, {

attaching a component to a layout cell you should not define any container for it:

const grid = new dhx.Grid(null, {

You can check it in the attach() method docs: