Sunday, March 26, 2006

DragDropList changes in the ATLAS March CTP release

As many of you know the ATLAS March CTP release is out as of last week. I recently downloaded it and found out that some of my samples broke. Specifically the customization of the DragDropList I had made to add support for a dragged and dropped events.

I have posted an updated version of my CustomDragDropList class that works with the March CTP release. I primarily took the source code from this release and added my customizations. The only additional change I had to make was to rename any references to the Web.UI namespace to Sys.UI instead.

Additionally I had to remove the "templateLayout" XML-Script element from the "dropCueTemplate" element, apparently that is no longer necessary and leaving it breaks the code. A sample usage of my CustomDragDropList should looks like this:

<control id="queueList">
  <customDragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" removed="itemAdded" added="itemRemoved" >
   <dropCueTemplate />

Monday, February 20, 2006

Creating a custom server control for ATLAS

When working with drag and drop lists in Atlas one task that you'll find yourself doing over and over again is adding the draggableListItem behavior to the controls that you wish to make "draggable" in your page's XML-Script. In many cases you may want to dynamically generate these controls with server side code based on results from a database query, for instance. For this reason, I thought it would make sense to build a custom web control to achieve this goal.

Rather than starting from scratch, I chose to start my control inheriting from the Panel control. This allows you to add any arbitrary content to the "draggable" item control, as it is translated to a span tag in HTML. In order to make the control "ATLAS-enabled" you need to implement the IScriptControl interface. The control's class declaration should be something similar to this:

public class DraggablePanel : System.Web.UI.WebControls.Panel, IScriptControl

Next you need to make sure to get a reference of the page's ScriptManager and register the control, and optionally you may want to add a reference to the AtlasUIDragDrop library to save you from doing that in the main page:
protected override void OnInit(EventArgs e)
if (!DesignMode)
ScriptManager scriptManager = ScriptManager.GetCurrent(Page);
if (scriptManager != null)

Next, the only method from the IScriptControl interface that must be implemented is the RenderScript method. The goal of the custom control is to output the following XML-Script:
<control id="webPart1">
<draggablelistitem handle="webPart1Title">

The RenderScript implementation will output the XML-Script above, using the control's id and the panel control's id as the handle:

public void RenderScript(ScriptTextWriter writer)
//Outputs control tag
GenericScriptComponent gsc = new GenericScriptComponent(
new ScriptTypeDescriptor("control",
//Outputs behaviors tag
gsc.ID = this.ClientID;
GenericScriptComponent draggableBehavior =
new GenericScriptComponent(
new ScriptTypeDescriptor("draggableListItem",
draggableBehavior.AddValueProperty("handle", this.ClientID);
gsc.AddCollectionItem("behaviors", draggableBehavior);

Tuesday, February 14, 2006

Upcoming talk on AJAX/ATLAS

I will be showcasing some ATLAS demos at the next Pittsburgh's .NET User Group meeting on Wednesday, Feb 22nd:

Monday, January 30, 2006

How to create drag and drop lists using ATLAS

One of the biggest reasons why ATLAS is so great is because of the set of rich client-side controls it includes, such as draggable lists. Before ATLAS, I had to rely on libraries such as and, both of these great libraries, but they require additional effort to integrate them into you ASP .NET web application. With ATLAS that is no longer the case.

To give you an idea of the great drag and drop capabilities built-in to ATLAS, I recommend taking a look at samples from Wilco Bauwer. The generic steps required to build your own draggable list are as follows:

Choose a HTML control that will contain your "draggable" items and add and as many "dragabble" items to it. In this example I'm using a div element with id "draggablePanel":

<div id="draggableContainer">
<div id="draggableItem1">My draggable item 1</div>
<div id="draggableItem2">My draggable item 2</div>

Next you need to add the dragDropList behavior to each draggable item and to the "draggable container" inside the XML script element of the page, without forgetting to add a reference to the AtlasUIDragDrop library:

src="ScriptLibrary/Atlas/Debug/AtlasUIDragDrop.js" />
<control id="draggableContainer">
<dragDropList dataType="HTML"
acceptedDataTypes="'HTML'" dragMode="Move">
<template layoutElement="dropCueTemplate" />
<control id="draggableItem1">
<draggableListItem handle="draggableItem1" />
<control id="draggableItem2">
<draggableListItem handle="draggableItem2" />

That's it! Can't get any easier than this, right?

Monday, January 23, 2006

Customizing ATLAS DragDropList class

For those new to ATLAS, ATLAS ( 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 ( 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">
<customDragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" removed="itemRemoved" added="itemAdded"> ....