Hannes Preishuber

I have written a proof of concept blog post about drag and drop with AJAX toolkit. In my second part I will take a look at the possibility's to store the new position. I earlier builds toolkit control supports direct storing in profile. That feature was dropped from toolkit.

My goal is to use DragPanelextender and read and write panel position from profile store. So I use a Panel, DragPanelExtender and a Label as dragobject.

<asp:Panel ID="dragPanel1" runat="server" BackColor="#00CC66" Height="83px"

Width="138px">

<asp:Label ID="dragLabel1" runat="server" Text="Dragme!"></asp:Label></asp:Panel>

<cc1:DragPanelExtender ID="Panel1_DragPanelExtender" runat="server"

DragHandleID="dragLabel1"

BehaviorID="dragPanelBehavior1"

Enabled="True" TargetControlID="dragPanel1">

</cc1:DragPanelExtender><br />

First we have to register a Event when dragpanel have a new location on page. We use propertchanged when  Page and AJAX Application is loaded. The Function Storeposition1 will handle the communication to AJAX profile service. The function setPostion is reading the values and setting the position on loading the page.

<script type="text/javascript" language="javascript">

window.onload = function() {

Sys.Application.add_load(ApplicationLoaded);

}

function ApplicationLoaded()

{

setPosition();

$find("dragPanelBehavior1").add_propertyChanged(storePosition1);

}

In web.config following entry's are necessary

First the typical format information of Profile Service

<profile enabled="true">

<properties>

<group name="dragdropprofile">

<add name="top" type="Integer" allowAnonymous="true"/>

<add name="left" type="Integer" allowAnonymous="true"/>

</group>

<add name="hannes" type="string"/>

</properties>

</profile>

Second the settings for the application bridge of profileService. The sample enable read and  write of top and left within dargdropprofile group.

<system.web.extensions>

<scripting>

<webServices>

readAccessProperties="dragdropprofile.top, dragdropprofile.left"

writeAccessProperties="dragdropprofile.top, dragdropprofile.left"/>

</webServices>

</scripting>

</system.web.extensions>

Then we can go to the "dragged" event storePosition1 and look for the new location of the Panel. Use the behaviorID from DragPanelextender.

function storePosition1(sender, eventargs)

{

if(eventargs.get_propertyName() == 'location')

{

var dragPanel = $find('dragPanelBehavior1');

var loc = dragPanel.get_location() ;

Sys.Services.ProfileService.properties.dragdropprofile.top = loc.x;

Sys.Services.ProfileService.properties.dragdropprofile.left = loc.y;

Sys.Services.ProfileService.save(null, onSaveSuccess, onError,null);

}

}

Cause callbacks to server can take a while and should not stop UI from responding, profile save is done asynchronously. Events for succes and error are needed.

function onSaveSuccess(result, userContext, methodName)

{

alert("saved");

}

function onError()

{

alert("not saved");

}

When you have values in aspnetdb profile table you can restore the position of panel on page load.

function setPosition(){

var x=Sys.Services.ProfileService.properties.dragdropprofile.top;

var y=Sys.Services.ProfileService.properties.dragdropprofile.left;

var newLocation = new Sys.UI.Point(x,y);

$find('dragPanelBehavior1').set_location(newLocation)

}

At the end don't forget the Scriptmanager as first control on your page. I use a trick to load the profile property's without code by declaration.

<asp:ScriptManager ID="ScriptManager1" runat="server">

<ProfileService LoadProperties="dragdropprofile.top,dragdropprofile.left" />

</asp:ScriptManager>

that should it be! have fun and extend it with your ideas.