Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Amal on Dec 22, 2009 05:36
open dhtmlx forum
DhtmlxLayout - Enable scroll for div


Now we require to implement the Dhtmlx Layout which is used to display the dynamic data added to the table. I have one table which will be added with many trs and tds dynamically. Finally I have attach the table object into one of the layout cells. Here I could not achieve the auto scroller for div control even though I put overflow:auto property for that div.kindly help me to reslove this.

Example :In the below example, I have added tr and td to the table dynamically by clicking the button called Layout.
But I could not find scroll when data exedding the boundry of div.



<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Test-Layout</title>
<link rel="STYLESHEET" type="text/css" href="dhtmlxLayout/codebase/dhtmlxlayout.css" />
<link rel="stylesheet" type="text/css" href="dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_blue.css" />
<link rel="stylesheet" type="text/css" href="dhtmlxWindows/codebase/dhtmlxwindows.css" />
<link rel="stylesheet" type="text/css" href="dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_blue.css" />
<script language="javascript" src="dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script language="javascript" src="dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script language="javascript" src="dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script language="javascript" src="dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
<script language=javascript src="dhtmlxWindows/codebase/dhtmlxwindows.js"></script>


</head>

<body onload="doOnLoad();">
<form id="form1">

<table>
<tr>
<td><input type=button value="Layout" text="Layout" onclick="fnAddcontrols()" /></td>

<td><div id="parentId" style="position: relative; height:400px; width: 600px;border: #909090 2px solid;overflow:auto;">
<table id="TheTable" runat="server" ></table>

</div>

</td>
</tr>
</table>




<script>

function doOnLoad()
{

var dhxLayout = new dhtmlXLayoutObject("parentId", "2U","dhx_blue");
dhxLayout.setEffect("resize",true);
dhxLayout.cells("a").setWidth(100);
dhxLayout.cells("a").setHeight(200);
dhxLayout.cells("a").setText("Inbox");
dhxLayout.cells("b").setText("Company and Contact Details");
dhxLayout.cells("b").attachObject("TheTable");
dhxLayout.cells("a").hideHeader();
dhxLayout.cells("b").hideHeader();


}

var objDiv = document.getElementById("parentId");
function fnAddcontrols()
{
var oRow = TheTable.insertRow();
var oCell = oRow.insertCell();
oCell.innerHTML ="<tr><td>test</td></tr>";
objDiv.scrollTop = objDiv.scrollHeight;

}
</script>


</form>
</body>
</html>
Answer posted by Alex (support) on Dec 22, 2009 06:23

Try to call the following method after adding table rows:

dhxLayout.cells("b").dhxcont.mainCont.style.overflow="auto"; 

Answer posted by Amal on Dec 24, 2009 00:28

Alex.Thanks a lot.It is working excellent.

but here everytime i need scroll down to view latest item added to the table.I require to focus the scrollbar for bottom of the div.

Thanks  in advance.

Answer posted by Alex on Dec 24, 2009 00:42

You can try to use the following:

tdhxLayout.cells("b").dhxcont.mainCont.scrollTop = dhxLayout.cells("b").dhxcont.mainCont.scrollHeight; 

Answer posted by Amal on Dec 24, 2009 04:41

Once again thanks a lot alex.

 

Perfect