About attach tabbar

Suite and Optimus Suite 7
#1

I input the grid in each of the two layouts, and in one layout, I want to show several grids using a tab bar. However, when I attach the tab bar, only one grid can be displayed on one screen. Please teach me the way. Below is the sauce I’m using.

var layout = new dhx.Layout(“layout_container”, {
rows : [
{
id: “ferryToolbarLayout”
},
{
type:“line”,
id: “ferryLayout”,
rows: [
{}
]
},
{
id: “tabbar”,
},
]
});

var ferryToolbar = new dhx.Toolbar(null, {
	css: "dhx_widget--border_bottom"
});

ferryToolbar.data.load('/style/toolbar/ferryToolbar.json');

ferryList = new dhx.Grid(null, {
	columns: [
        { width: 120, id: "userCode", header: [{ text: "userCode" }, {content:"inputFilter" }],align:"left"  },
        { width: 100, id: "ferryName", header: [{ text: "ferryName" }, {content:"inputFilter" }],align:"center" },
        { width: 100, id: "ferryUserType", header: [{ text: "ferryUserType" }, {content:"inputFilter" }],align:"center" },
        { width: 120, id: "userEmail", header: [{ text: "userEmail" }, {content:"inputFilter" }],align:"left"  },
        { width: 100, id: "userPhone", header: [{ text: "userPhone" }, {content:"inputFilter" }],align:"left"  },
        { width: 180, id: "manager", header: [{ text: "manager" },{content:"inputFilter" }],align:"center" },
        { width: 100, id: "note", header: [{ text: "note" }],align:"center"  },
    ],
    headerRowHeight: 40,
    autoWidth: true,
    resizable: true,
    dragItem: "column",
    dragMode: "source" ,
    selection : "row",
});

layout.getCell("ferryToolbarLayout").attach(ferryToolbar);
layout.getCell("ferryLayout").attach(ferryList);

ferryList.data.load("/admin/ferry.sws?mode=xml");

const tabbar = new dhx.Tabbar("tabbar", {
    css: "dhx_widget--bordered",
    mode: "top",
    views: [
        { id: "state", tab: "state" },
        { id: "stateMove", tab: "stateMove" },
        { id: "sellList", tab: "sellList" }
    ]
});

layout.getCell("tabbar").attach(tabbar);

var stateList = new dhx.Grid(null, {
	columns: [
        { width: 100,id: "socket", header: [{ text: "socket" }],align:"center"  },
        { width: 100, id: "nodeType", header: [{ text: "nodeType" }],align:"center"  },
        { width: 100, id: "num", header: [{ text: "num" }],align:"center"  },
        { width: 150, id: "openedBy", header: [{ text: "Opened by" }],align:"center"  },
        { width: 250, id: "Note", header: [{ text: "Note" }],align:"center"  },
    ],
    headerRowHeight: 40,
    resizable: true,
    dragItem: "column",
    dragMode: "source" ,
    selection : "row", 
});

tabbar.getCell("state").attach(stateList);
#2

Hi, I put your code in the snippet for viewing. I just adjusted the height to show the grids in the layout and in the tab.

Do you want to show a grid on each tab?

Follow the example:
https://snippet.dhtmlx.com/gdknl8a6