Hi Olga,
Please find the details in following html. Do let me know if there are any mistakes in the code.
html, body {
width: 100%;
height: 100%;
margin: 0px;
overflow: auto;
}
<!-- StyleSheets -->
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxgrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxtabbar/codebase/dhtmlxtabbar.css">
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxgrid/codebase/dhtmlxgrid_skins.css">
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<!-- Grid scripts -->
<script src="../codebase/dhtmlxgrid/codebase/dhtmlxcommon.js"></script>
<script src="../codebase/dhtmlxgrid/codebase/dhtmlxgrid.js"></script>
<script src="../codebase/dhtmlxgrid/codebase/dhtmlxgridcell.js"></script>
<!-- m_tabbar scripts -->
<script src="../codebase/dhtmlxtabbar/codebase/dhtmlxcommon.js"></script>
<script src="../codebase/dhtmlxtabbar/codebase/dhtmlxtabbar.js"></script>
<script src="../codebase/dhtmlxtabbar/codebase/dhtmlxcontainer.js"></script>
<script src="../codebase/dhtmlxtabbar/codebase/dhtmlxtabbar_start.js"></script>
<!-- DHTMLX Layout scripts -->
<script src="../codebase/dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="../codebase/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="../codebase/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script language="javascript">
var m_searchLayout;
var m_tabbar;
var m_tabcount;
function createTabControl()
{
m_tabbar = m_searchLayout.cells("a").attachTabbar();
m_tabbar.setImagePath("../codebase/dhtmlxtabbar/codebase/imgs/");
m_tabbar.setSkinColors("#FCFBFC", "#F4F3EE", "#FCFBFC");
m_tabbar.enableAutoReSize(true);
m_tabbar.enableTabCloseButton(true);
m_tabbar.setStyle("winDflt");
m_tabcount = 1;
}
function createNewSearchResults()
{
var tabName = "Tab" + m_tabcount.toString();
var searchname = "search" + m_tabcount.toString();
m_tabbar.addTab(tabName, searchname, "100%");
var grid = m_tabbar.cells(tabName).attachGrid();
grid.setImagePath("../codebase/dhtmlxGrid/codebase/imgs/");
grid.setHeader("col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12, col13, col14, col15, col16, col17, col18, col19, col20,col21,col22");
grid.setInitWidths("100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100");
grid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");
grid.setColSorting("str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str,str");
grid.enableAutoHeight(true);
grid.enableAutoWidth(true);
grid.enableMultiselect(true);
grid.init();
for (var i = 50; i >= 0; i--)
{
grid.addRow(i, ['test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test', 'test']);
};
grid.setSkin("light");
m_tabbar.setTabActive(tabName);
m_tabbar.enableAutoSize(true, true);
}
function displaySearchResults()
{
createTabControl();
createNewSearchResults();
}
function createLayout()
{
m_searchLayout = new dhtmlXLayoutObject("searchLayout", "1C", "dhx_blue");
m_searchLayout.cells("a").hideHeader();
}
function onLoad()
{
createLayout();
displaySearchResults();
}
</script>