Retain position of a DragPanel Extender after postback using ASP.NET AJAX
The DragPanel extender makes it extremely simple to add a ‘drag’ to your controls. It can target any panel control which enables you to move your panel from one place to another, on the client-side. However there is a functionality missing in the DragPanel extender. The DragPanel extender does not have the built-in capability to retain the position of controls that have been dragged, after a page postback. In this article, we will see how to retain the position of the DragPanel extender, after a postback. This tip was shared by Jonathan in the asp.net forums. I will be building up on that trick and show you a step by step process on how to do it.
I assume you have some basic experience developing ASP.NET Ajax applications and have installed the ASP.NET Ajax Library and ASP.NET Control Toolkit. As of this writing, the toolkit version is Version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting .NET Framework 3.5 and Visual Studio 2008).
This article has been created using Version 3.0.20229 (targeting .NET Framework 3.5 and Visual Studio 2008).
Step 1: Open Visual Studio > File > New Web Site > ASP.NET Web Site > Choose the location and language and click OK.
Step 2: Drag and drop a <asp:ScriptManager> control to the form. Also add a <div> to the page with the following properties:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div style="height: 300px; width: 250px; padding: 20px;">
</div>
</div>
</form>
</body>
Step 3: Now inside the <div> add a Panel Control called “Panel1”. Inside this <Panel>, add another panel called “Panel2”. We will be dragging Panel1 across the screen. After setting properties on the <Panel>, the code would look similar to the following.
<div>
<div style="height: 300px; width: 250px; float: left; padding: 5px;">
<asp:Panel ID="Panel1" runat="server" Width="250px">
<asp:Panel ID="Panel2" runat="server" Width="40%" Height="20%" BorderWidth="1px" BorderStyle="Solid"
BorderColor="black">
Drag This Panel
</asp:Panel>
</asp:Panel>
</div>
</div>
Step 4: Now add a DragPanel Extender from the Ajax Control Toolkit in the toolbox, to the page. Set its TargetControlID and DragHandleID to ‘Panel1’. Also set its BehaviorID to ‘DragP1’
<cc1:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1" runat="server"
DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1">
</cc1:DragPanelExtender>
Also add a button control to the page and now run the application. Drag the panel and place it at a different position. Now hit the button. You will see that a postback occured and that the Panel position was reset to its original position.
Step 5: We will now add some script to maintain the position of the panel after postback. We will be adding a HiddenField which will store the position of the dragged panel. The value has been initially set to “0”.
<asp:HiddenField ID="HiddenField1" runat="server" Value="0" />
When the panel is dragged, the value is temporarily stored in the hidden field. When the page is posted back, in the pageLoad(), we will retrieve the value from the hidden field and manually set the position of the panel.
Here’s the script to do so:
<script type="text/javascript" language="javascript">
function pageLoad()
{
// call the savePanelPosition when the panel is moved
$find('DragP1').add_move(savePanelPosition);
var elem = $get("<%=HiddenField1.ClientID%>");
if(elem.value != "0")
{
var temp = new Array();
temp = elem.value.split(';');
// set the position of the panel manually with the retrieve value
$find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]),parseInt(temp[1])));
}
}
function savePanelPosition()
{
var elem = $find('DragP1').get_element();
var loc = $common.getLocation(elem);
var elem1 = $get("<%=HiddenField1.ClientID%>");
// store the value in the hidden field
elem1.value = loc.x + ';' + loc.y;
}
</script>
The savePanelPosition() gets the location of the Panel. The savePanelPosition() gets called every time the panel is dragged. This is possible as in the pageLoad(), we have registered add_move() on the Panel and set it to call the savePanelPosition() method. In this method, we then store the location of the panel in the HiddenField. The loc.x and loc.y represent the x and y co-ordinates of the dragged panel, which is stored as a semicolon(;) delimited string.
When the page is posted back, we retrieve the value of the HiddenField in the pageLoad() function. If the value is not “0”, we retrieve the value in an Array (by splitting the semicolon delimited string) and then set the position of the Panel manually using the retrieved value.
You can now run the application, drag the panel and hit the button. If you have followed the steps correctly, you will observe that the panel retains its position, after a postback. The entire source code will look similar to the following:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Retain Postback</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div style="height: 300px; width: 250px; padding: 5px;">
<asp:Panel ID="Panel1" runat="server" Width="250px">
<asp:Panel ID="Panel2" runat="server" Width="40%" Height="20%" BorderWidth="1px" BorderStyle="Solid"
BorderColor="black">
Drag This Panel
</asp:Panel>
</asp:Panel>
</div>
</div>
<cc1:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1" runat="server"
DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1">
</cc1:DragPanelExtender>
<script type="text/javascript" language="javascript">
function pageLoad()
{
// call the savePanelPosition when the panel is moved
$find('DragP1').add_move(savePanelPosition);
var elem = $get("<%=HiddenField1.ClientID%>");
if(elem.value != "0")
{
var temp = new Array();
temp = elem.value.split(';');
// set the position of the panel manually with the retrieve value
$find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]),parseInt(temp[1])));
}
}
function savePanelPosition()
{
var elem = $find('DragP1').get_element();
var loc = $common.getLocation(elem);
var elem1 = $get("<%=HiddenField1.ClientID%>");
// store the value in the hidden field
elem1.value = loc.x + ';' + loc.y;
}
</script>
<asp:Button ID="Button1" runat="server" Text="Button"/>
<asp:HiddenField ID="HiddenField1" runat="server" Value="0" />
</form>
</body>
</html>
