how to include a tabbar in a form with container

Suite and Optimus Suite 5
#1

Hello,

I’m new with dhtmlx and I don’t understand the way to include a tabbar or a grid with a container in a form

Here are my pieces of code :

A function “createclient” in charge to show a window with a form to get clients information :

[code]function createClient() {
dhxWins = new dhtmlXWindows();
detailWin = dhxWins.createWindow(“detailWin”, 80, 80, 790, 320);
detailWin.setText(“Création d’un nouveau client”);
detailWin.center();
detailWin.setModal(true);
detailForm = detailWin.attachForm();
detailForm.loadStruct(“json/testclient.json”);

tabaddress = new dhtmlXTabBar(detailForm.getContainer("myContainer"));
tabaddress.setSkinColors("#FCFBFC","#F4F3EE");
tabaddress.addTab("a1", "Tab 1-1");
tabaddress.addTab("a2", "Tab 1-2");
tabaddress.addTab("a3", "Tab 1-3");

;
};
[/code]
a testclient.json file to load the structure of the form :

[ {type: "settings", position: "label-left", labelWidth: 90, inputWidth: 130}, {type: "input", label: "Nom", value: "", name: "Nom"}, {type: "container", label: "Adresses", value: "Testi", name: "myContainer", inputWidth: "500", inputHeight: "300"} ]

It’s simplified for testing.

What I’m doing wrong because the label is shown but nothing else.

Thanks for your help

#2

hi, this is an example of a tabbar and grid with containers
I hope it can help you
Claudio

str=[
{_idd: “175”, type: “block”, width: “auto”, offsetTop: “0”, blockOffset: “0”, list: [
{_idd: “2900”, type: “container”, value: “”, name: “scheda”, inputWidth: “1112”, inputHeight: “315”, offsetTop: “0”}
]}
];

let form_ana = tabbarclie.cells(‘tab_1’).attachForm(str);
form_ana.setItemFocus(“xxxxx”);
tabscheda = new dhtmlXTabBar(form_ana.getContainer(‘scheda’));
tabscheda.addTab(‘tab_1’,‘zzzzzzi’);
tabscheda.addTab(‘tab_2’,‘eeeeeeeee’);

    let tab_fs = tabscheda.cells('tab_1');
       tab_fs.setActive();

let str=[
{_idd: “413”, type: “block”, width: “auto”, blockOffset: 0, offsetTop: 10, list: [
{type: “settings”, position: “label-left”, labelWidth: 80, inputWidth: 130},
{_idd: “416”, type: “container”, label: “”, name: “grid”, inputWidth: 500, inputHeight: 220, offsetLeft: 0, offsetTop: 0},
{_idd: “417”, type: “newcolumn”},
]}
]}
];

let grid_pass = new dhtmlXGridObject(form_pass.getContainer(‘grid’));
grid_pass.attachEvent(“onRowSelect”, function(rId,cInd){
}

#3

Pleas,e try to use the callback function for your form structure loading:
detailForm.loadStruct(“json/testclient.json”,function(){
tabaddress = new dhtmlXTabBar(detailForm.getContainer(“myContainer”));
tabaddress.setSkinColors("#FCFBFC","#F4F3EE");
tabaddress.addTab(“a1”, “Tab 1-1”);
tabaddress.addTab(“a2”, “Tab 1-2”);
tabaddress.addTab(“a3”, “Tab 1-3”);
});

#4

Thank’s Sematik for your help.

Is it the same thing for a grid ? Do I need to use a callback function ?
Can I put in the same form a tabbar and a grid ?

#5

Yes, you need to use the same approach.
You may include the grid and the tabbar in the same form. just make sure that they have different containers.