Start Building Professional
Web Apps Today

Grid inside Tabbar

I am trying to place two grids inside two tabs in Tabbar. I read the sample on how to put a grid inside tabbar but I am still confused.

Here is my code:

<script>
tabbar=new dhtmlXTabBar("a_tabbar","top");
tabbar.setImagePath("tabbar/codebase/imgs/");
tabbar.setStyle("silver");
tabbar.setSkinColors("#F2F1F0","#ffffff");
tabbar.setHrefMode("iframe");
tabbar.addTab("a1","This Week","100px");
tabbar.addTab("a2","Statistics","100px");
tabbar.addTab("a3","Feedback","100px");
tabbar.setContentHref("a1","html_1");
tabbar.setContentHref("a2","html_2");
tabbar.setContentHref("a3","feedback.html");
tabbar.setTabActive("a1");


var statgrid = dhtmlXGridObject('html_1');
statgrid.setImagePath("codebase/imgs/");
statgrid.setSkin("modern");
statgrid.loadXML("step2.xml");
statgrid.init();

};

</script>

What am I doing wrong. How do I get the second grid in (a2)? Thanks.

Assumming that you have next html containers somewhere on the page 
  <div style="width:100px; height:200px;" id="html_1"></div>
  <div style="width:100px; height:200px;" id="html_2"></div>

The correct code will look as
...
var statgrid1 = dhtmlXGridObject('html_1'); 
...
var statgrid2 = dhtmlXGridObject('html_2'); 
...
tabbar.setContent("a1","html_1"); 
tabbar.setContent("a2","html_2"); 
...

You can check
http://dhtmlx.com/docs/products/dhtmlxTabbar/samples/interaction_other_components/tab_dhtmlx.html?un=1231757957000

Actually I am trying to put 2 grids in the same tabbar object (as tab "a" and tab "b") so I would have just one object, right?    I tried this but does not work:

<CENTER><div id="a_tabbar" style="width:350;height:200"></div></CENTER>
<script>
            tabbar=new dhtmlXTabBar("a_tabbar","top");
            tabbar.setImagePath("tabbar/codebase/imgs/");
            tabbar.setStyle("silver");
            tabbar.setSkinColors("#F2F1F0","#ffffff");
            tabbar.setHrefMode("iframe");
            tabbar.addTab("a1","This Week","100px");
            tabbar.addTab("a2","Statistics","100px");
            tabbar.addTab("a3","Feedback","100px");
            tabbar.setContent("a1","a_tabbar");
            tabbar.setContentHref("a2","a_tabbar");
            tabbar.setContentHref("a3","feedback.html");
            tabbar.setTabActive("a1");
           

var statgrid = dhtmlXGridObject('a_tabbar');

statgrid.setImagePath("codebase/imgs/");
statgrid.setSkin("modern");
statgrid.loadXML("step2.xml");
statgrid.init();

};

 

You need to have 
a) container for the tabbar
b) container for the grid A
c) container for the grid B

now you can 

init tabbar in its container
init gridA in its container
init gridB in its container

use attachObject to attach gridA's container to the tab A
ust attachObject to attach gridB's container to the tab B

>>I would have just one object, right
You will have one tabbar object, but you need 3 different containers on the page ( later by attachObject code they will be combined in single structure )