Simple thing?
One of our customers asked me how to implement a vertical rolling/scroll bar on his web site which is using the ASP .Net 2.0 Tree View control. I told him that he could use a DIV with a simple javascript to deal with the tree expansion and the rolling bar behavior.
We have implemented a working sample and I’d like to share with you. It is a simple thing, but can be useful one day, nobody knows.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="meudiv" runat="server" style="overflow:auto; width:260px; height: 190px">
<asp:TreeView ID="TreeView1" runat="server" ImageSet="XPFileExplorer" NodeIndent="15"
ShowLines="True" Height="214px" Width="150px" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
VerticalPadding="0px" />
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px" />
</asp:TreeView>
</div>
</div>
</form>
</body>
</html>
<script type="text/jscript" language="javascript">
var inpSelectedNode = document.getElementById("TreeView1_SelectedNode");
alert('valor = ' + inpSelectedNode.value);
if (inpSelectedNode.value != "")
{
var objScroll = document.getElementById(inpSelectedNode.value);
meudiv.scrollTop = findPosY(objScroll)-25;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
</script>
This posting is provided "AS IS" with no warranties, and confers no rights.
