Monday, January 23, 2006

Customizing ATLAS DragDropList class

For those new to ATLAS, ATLAS (http://atlas.asp.net) is a new library in development by Microsoft of client and server side components for ASP .NET 2.0, it helps incorporate the use AJAX into web applications, but it is a lot more than an AJAX library, as it also provides a set of controls that leverage DHTML and JavaScript to provide a rich user experience in web apps similar to that found in Google maps and flickr.

I'm currently working on extending the DragDropList included in this library to allow detecting when an item is added or removed and issue a call to the server using AJAX. Thanks to the help of Garbin (http://forums.asp.net/AddPost.aspx?PostID=1176694). I was able to customize this class and I'd like to share my learning with those pursuing a similar goal.
  1. Because the Web.UI.DragDropList is a sealed class, I could not inherit from it, and instead of modifying the source code (AtlasUIDragDrop.js) I chose to create a custom class starting with the code from Web.UI.DragDropList and adding my changes to a class I named Web.UI.CustomDragDropList
  2. Next inside the getDescriptor function I added the following events:

    //Step 1: Add events
    td.addEvent('removed', true);
    td.addEvent('added', true);

  3. Next I added the properties (these can be added at the top level of the class, outside any function):

    //Step 2: Create Events
    this.added = this.createEvent();
    this.removed = this.createEvent();

  4. Finally inside the onDragEnd function I added the removed event invocation and inside the drop function I added the added event invocation as follows:

    //Step 3: Invoke remove method
    this.removed.invoke(this, Web.EventArgs.Empty);
    //Step 4: Invoke added method
    this.added.invoke(this, Web.EventArgs.Empty);

The usage of this list from the ASP page is as follows:

<control id="draggableList">
<behaviors>
<customDragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" removed="itemRemoved" added="itemAdded"> ....

8 comments:

Jorge Balderas said...

I have posted the source code here:
Demo.aspx and CustomDragDrop.js

creaturita said...

In your example you register a control:
Register Assembly="AtlasClassLibrary" Namespace="AtlasClassLibrary" TagPrefix="cc1" %>

Where is the atlasclasslibrary dll?

Thanks.

Jorge Balderas said...

Oh, yes, I forgot about that, the source file is posted here: http://mysite.verizon.net/vze2rrsm/atlas/CustomDragDrop/DraggablePanel.cs.txt

Taz® said...

i get a javascript web is not identified error, using the march CTP.. is anyone replicating this? Any help?

Taz® said...
This comment has been removed by a blog administrator.
Jorge Balderas said...

I haven't tried in with the March CTP, I'm planning on trying it out and will let you know of my findings...

Anonymous said...

I also had a problem with the "Web."

I got around it by making the event arg null.

Jorge Balderas said...

I have posted an updated version for the March CTP release here