How to set the X Properties of a ModalPopup on client side codes?

I want to find the position of a selected TreeNode in a TreeView.

Then set the X Properties and Y Properties of the ModalPopup.

And make the panel1 pop up beside the selected node. Does anyone know how to do that?

Any suggestion is welcome.

 

    <script type="text/javascript">
    function FindPosition(elem)
    {
        debugger;
        var id=elem.id;
        var x=getX(elem);
        var y=getY(elem);
       
    }
    function getX(oElement)
    {
        var iReturnValue = 0;
        while( oElement != null ) {
            iReturnValue += oElement.offsetLeft;
            oElement = oElement.offsetParent;
        }
        return iReturnValue;
    }
    function getY(oElement)
    {
        var iReturnValue = 0;
        while( oElement != null ) {
            iReturnValue += oElement.offsetTop;
            oElement = oElement.offsetParent;
        }
        return iReturnValue;
    }
    </script>

 

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:TreeView ID="TreeView1" runat="server" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged1">
            <Nodes>
                <asp:TreeNode Text="<span onclick='FindPosition(this)' id='node01'>Node 1</span>"
                    Value="New Node"></asp:TreeNode>
                <asp:TreeNode Text="<span onclick='FindPosition(this)' id='node02'>Node 2</span>"
                    Value="New Node"></asp:TreeNode>
            </Nodes>
        </asp:TreeView>
        <asp:LinkButton ID="lb" runat="server" Style="display: none" />
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="foo" runat="server"
            TargetControlID="TreeView1" PopupControlID="Panel1">
        </cc1:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
            <asp:Label ID="Label1" runat="server" Text="test"></asp:Label>
        </asp:Panel>


this.brain=null;
MSN+EMAIL: vincent90152900@gmail.com
0
vincent90152900
11/6/2007 4:00:27 AM
asp.net.ajax_control_toolkit 17816 articles. 1 followers. Follow

4 Replies
553 Views

Similar Articles

[PageSpeed] 13

Change FindPosition to this:
function FindPosition(elem)
{
var id=elem.id;
var bounds=Sys.UI.DomElement.getBounds(elem);
var foo=$find("foo");
foo.set_X(bounds.x+bounds.width);
foo.set_Y(bounds.y);
}
 
0
Hocke
11/6/2007 8:02:55 PM

 It does not works.

Many thanks for your replying. 


this.brain=null;
MSN+EMAIL: vincent90152900@gmail.com
0
vincent90152900
11/7/2007 5:25:10 AM

 In what way does it fail. Make sure you're using the latest version of ASP.NET 2.0 AJAX Extensions  and ASP.NET AJAX Control Toolkit.

This example has been tested with  ASP.NET AJAX Control Toolkit release 10618 and 10920. Clicking on Node 1 will display "test" next to it. Please note that this example only demonstrates how to position the popup next to the item that was clicked and is not full, working code.

  

<script type="text/javascript">
	function SetPopupPosition(elem)
	{
			var id=elem.id;
			var bounds=Sys.UI.DomElement.getBounds(elem);      
			var foo=$find("foo");
			foo.set_X(bounds.x+bounds.width);
			foo.set_Y(bounds.y);
	}
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TreeView ID="TreeView1" runat="server">
	<Nodes>
		<asp:TreeNode Text="'SetPopupPosition(this)' id='node01'>Node 1</span>" Value="New Node"></asp:TreeNode>
		<asp:TreeNode Text="'SetPopupPosition(this)' id='node02'>Node 2</span>" Value="New Node"></asp:TreeNode>
	</Nodes>
</asp:TreeView>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="foo" runat="server" TargetControlID="TreeView1" PopupControlID="Panel1" />
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
	<asp:Label ID="Label1" runat="server" Text="test"></asp:Label>
</asp:Panel>
 
0
Hocke
11/7/2007 8:58:29 AM

 

It works beautifully.

Many Thanks for your replying.


this.brain=null;
MSN+EMAIL: vincent90152900@gmail.com
0
vincent90152900
11/8/2007 3:29:12 AM
Reply: