Tabbar and grid with HTML

Suite and Optimus Suite 8
#1

I try create a Tab with mixed HTML and Grid, but when attach Grid in a container inside tab, the grid show after tab container not inside of the Tab

#2

The best solution in this case is to place a layout with several cells to your tab, where one of the cells will contain a grid.
If the problem still occurs for your please, provide a complete demo, where the problem can be reconstructed.

#3

Thanks sematic for your answer!! above, a piece of my code:

<html>
         <div id="mytabbar" style="width: 100%; height: 750px;"></div>
</html>

<script>
var myTabbar;
var mygrid1;

myTabbar = new dhx.Tabbar("mytabbar", {
        mode: "top",
        views: [
        { id: "id_tb_plane", tab: "Plan" },
        { id: "id_tb_resum", tab: "Resum" },
    ]
});

myTabbar.getCell('id_tb_plane').attachHTML("<div class=div_grid id=div_grid></div>");
myTabbar.getCell('id_tb_resum').attachHTML("<div class=div_grid id=div_grid_resum></div>");

    // creating DHTMLX Grid 
    mygrid1 = new dhx.Grid("div_grid", {
        columns: [
            { width: 350, index:1, id: "a", header: [{ text: "Descrição" },{ content: "inputFilter" }] },
            { width: 400, index:2, id: "b", header: [{ text: "Beneficiário" }, { content: "inputFilter" }] },
	    { width: 100, index:3, id: "c", header: [{ text: "Valor Prev." }] },
	    { width: 100, index:4, id: "d", header: [{ text: "% Prev." }] },
	    { width: 100, index:5, id: "e", header: [{ text: "Valor real." }] },
            { width: 100, index:6, id: "f", header: [{ text: "% real." }] },
            { width: 150, index:7, id: "g", header: [{ text: "Saldo a pagar" }] },
            { width: 50, index:8, id: "h", header: [{ text: "CP" }],htmlEnable: true},
	    { width: 50, index:9, id: "i", header: [{ text: "V" }],htmlEnable: true},
            { width: 50, index:10, id: "j", header: [{ text: "A" }],htmlEnable: true},
            { width: 50, index:11, id: "k", header: [{ text: "D" }],htmlEnable: true}            
        ],
        height: 500,
        headerRowHeight: 40,
        rowHeight: 30,      
        autoWidth: true,
        resizable: true,
	selection: "complex",
	keyNavigation: true              
    });

//json_string created dinamicaly with db data
mygrid1.data.parse('".$json_string."');

</script>
#4

Please, try to use the attach() method:

to place the dhx components to the tabbar tab (or other dhx container).
Here is the updated snipppet:
https://snippet.dhtmlx.com/1ybwz3yv

#5

Thanks sematik, I will try to use layout component