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)
{
  base.OnInit(e);
  if (!DesignMode)
  {
    ScriptManager scriptManager = ScriptManager.GetCurrent(Page);
    if (scriptManager != null)
    {
      scriptManager.RegisterControl(this);
      scriptManager.RegisterScriptReference(
                FrameworkScript.AtlasUIDragDrop);
     }
  }
}

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">
  <behaviors>
    <draggablelistitem handle="webPart1Title">
  </behaviors>
</control>

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", 
      ScriptNamespace.Default));
    //Outputs behaviors tag
    gsc.ID = this.ClientID;
    GenericScriptComponent draggableBehavior = 
      new GenericScriptComponent(
        new ScriptTypeDescriptor("draggableListItem", 
                                 ScriptNamespace.Default));
    draggableBehavior.AddValueProperty("handle", this.ClientID);
    gsc.AddCollectionItem("behaviors", draggableBehavior);
    ((IScriptObject)gsc).RenderScript(writer);
}