hi ,guys,

i 'm struggling with AtlasUIDragDrop.js, i want to use DragDropList programatically. i don't know how to implement the Sys.UI.ITemplate interface programmatically to make my dropCueTemplate and emptyTemplate  work ,please help

<div>
            <!-- Left Area -->
            <div id="leftArea" class="list1">
                <div id="content1" class="item">
                    <div id="content1Title" class="itemTitle">Content 1</div>
                    <div class="itemContent">
                        <%--<asp:Login ID="myLogin" runat="server"></asp:Login>--%>hello
                    </div>
                </div>
                <div id="content2" class="item">
                    <div id="content2Title" class="itemTitle">Content 2</div>
                    <div class="itemContent">
                        Dflying's Item
                    </div>
                </div>
            </div>
            <!-- Right Area -->
            <div id="rightArea" class="list2">
                <div id="content3" class="item">
                    <div id="content3Title" class="itemTitle">Content 3</div>
                    <div class="itemContent">
                        <%--<asp:Calendar ID="myCalendar" runat="server" CssClass="centered"></asp:Calendar>--%>hello
                    </div>
                </div>
            </div>
            <div style="clear: both">
            </div>
           
            <!-- Hide template elements -->
            <div style="display:none;">
                <!-- DropCue Template -->
                <div id="dropCueTemplate" class="dropCue">
                </div>
                <!-- Empty Template -->
                <div id="emptyTemplate" class="emptyList">
                    Drop content here.
                </div>
            </div>
           
        </div>

<script language="javascript">
       function pageLoad()
       {
          var _zone1;
          var _zone2;
          var _item1;
          var _item2;
          var _item3;
         
          var leftArea=new Sys.UI.Control($('leftArea'));
         
          leftArea.initialize();
          var rightArea=new Sys.UI.Control($('rightArea'));
          rightArea.initialize();

 
          var content1=new Sys.UI.Control($('content1'));
         
          content1.initialize();
          var content2=new Sys.UI.Control($('content2'));
         
          content2.initialize();
          var content3=new Sys.UI.Control($('content3'));
         
          content3.initialize();
      
          _zone1=new Sys.UI.DragDropList();
         
          _zone1.set_dataType('HTML');
          _zone1.set_acceptedDataTypes(['HTML']);
          _zone1.set_dragMode(Sys.UI.DragMode.Move);
          _zone1.set_direction(Sys.UI.RepeatDirection.Vertical);
          //_zone1.set_dropCueTemplate(????);
          //_zone1.set_emptyTemplate(????);
         
         
          _zone2=new Sys.UI.DragDropList();
         
          _zone2.set_dataType('HTML');
          _zone2.set_acceptedDataTypes(['HTML']);
          _zone2.set_dragMode(Sys.UI.DragMode.Move);
          _zone2.set_direction(Sys.UI.RepeatDirection.Vertical);
          //_zone2.set_dropCueTemplate(????);
          //_zone2.set_emptyTemplate(????);    
          
          _item1=new Sys.UI.DraggableListItem();
          _item1.initialize();
          _item1.set_handle($('content1Title'));
         
         
          _item2=new Sys.UI.DraggableListItem();
          _item2.initialize();
          _item2.set_handle($('content2Title'));
         
         
          _item3=new Sys.UI.DraggableListItem();
          _item3.initialize();
          _item3.set_handle($('content3Title'));
         
          content1.get_behaviors().add(_item1);
          content2.get_behaviors().add(_item2);
          content3.get_behaviors().add(_item3);
         
          leftArea.get_behaviors().add(_zone1);
          _zone1.initialize();
          rightArea.get_behaviors().add(_zone2);
          _zone2.initialize();
        
       }
    </script>

 

there 's no problem with declarative sytax,but i need to make it work programmatically

so how can i implement the Sys.UI.ITemplate.

millions of thanx in advance!

 

hello.

though i haven't uset it, i think using the Sys.UI.DeclarativeTemplate is the way to go

thanx ,but i need to make it in programmatical way ,not in declarative way.

declarative xml-script is easy, then programmatical way should not be so hard,

so how can i do make in the pageLoad() function?

Regards

hello again.

yes, you're right...declarativetemplate won't cut it....well, you'll have to implement the interface as you said...i haven't done nothing like that yet....maybe someone has an idea about how to do that...i'll try to look at it tonight. if i manged to get anything working, i'll post back.

thanks Luis ;-)

looking forward to your solution .

hello.

hum...not sure if this is what you're after, but i've developed a custom non generalized template that can be used with a listview. this nees several improvements, but i think it should be enough to get you started (i hope). unfortunatelly, implementing a template programatically is a lot harder that i initially though...

here's the code:

 

<!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>
    <title>Untitled Page</title>
</head>
<body>
    <script type="text/javascript" src="Atlas.js">
    </script>
   
     <div style="display: none">
        <table id="masterTemplate">
            <tbody id="topElement">
            <tr class="header">
                <th>Nome</th>
                <th>Idade</th>
              
            </tr>
            <tr id="itemTemplate">
                <td id="idTemplate"></td>
                <td id="nomeTemplate"></td>
              
            </tr>
          
            </tbody>
        </table>
    </div>
   
    <div id="conteudo">
    </div>
   

   
     <script type="text/xml-script">
         <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
            <components>
                <dataSource id="mySource" autoLoad="true">
                    <initialData>
                        [{id:1, nome:"Luis"},{id:2, nome:"Rita"},{id:3, nome:"Pedro"},{id:4, nome:"Maria"},{id:5, nome:"Raul"}]
                    </initialData>                  
                </dataSource>
            </components>
        </page>         
    </script>   
   
    <script type="text/javascript">
   
        Sys.Application.load.add( onload );
       
        Type.registerNamespace( "LA" );
        LA.Template = function( element ) {
            var _element        = element;
           
            this.createInstance = function( containerElement, dataContext, instanceElementCreatedCallback, callbackContext ){
                var result = new Sys.TemplateInstance();
                result.instanceElement = _element.cloneNode( true );
               
                if( dataContext != null ) {
                    result.instanceElement.childNodes[0].innerText = dataContext.getProperty( "id" );
                    result.instanceElement.childNodes[1].innerText = dataContext.getProperty( "nome" );
                }
                               
               
                containerElement.appendChild( result.instanceElement );
                return result;
            }
           
            this.initialize = function() {
                if( _element.parentNode ){
                    _element.parentNode.removeChild( _element );
                }
            }
           
            this._initializeContent = function( ctl, dataContext ) {
               var lbl = new Sys.UI.Label( ctl );
              
               var binding = new Sys.Binding();
               binding.set_dataPath( "id" );
               binding.set_property( "text" );
              
               lbl.get_bindings().add( binding );
            }
           
            this.dispose = function() {
                _element = null;
            }
        }       
        LA.Template.registerClass( "LA.Template", null, Sys.UI.ITemplate, Sys.IDisposable );
       
        LA.MainTemplate = function( element ) {
            var _element = element;
           
             this.createInstance = function( containerElement, dataContext, instanceElementCreatedCallback, callbackContext ){
                var result = new Sys.TemplateInstance();
                result.instanceElement = _element.cloneNode( true );
               
                if( !Sys.Application.getMarkupContext().findObject( element.id ) ) {
                    Sys.Application.getMarkupContext().addObject( element.id, element );
                }
               
                result.callbackResult = result.instanceElement.childNodes[0];               
                containerElement.appendChild( result.instanceElement );
                return result;
            }
           
            this.initialize = function() {
                if( _element.parentNode ){
                    _element.parentNode.removeChild( _element );
                }
            }
            
            this.dispose = function() {
                _element = null;
            }
        }
         LA.Template.registerClass( "LA.MainTemplate", null, Sys.UI.ITemplate, Sys.IDisposable );
       
        function onload( ) {
            var list = new Sys.UI.Data.ListView( $("conteudo") );
            list.set_itemTemplateParentElementId( "topElement" );
           
            list.set_layoutTemplate( new LA.MainTemplate( $("masterTemplate") ) );
           
            var binding = new Sys.Binding();
            binding.set_dataContext( $object("mySource") );
            binding.set_dataPath( "data" );
            binding.set_property( "data" );
           
            list.get_bindings().add( binding );
                       
            list.set_itemTemplate( new LA.Template( $("itemTemplate") ) );
           
            list.initialize();           
        }
       
    </script>
   
</body>
</html>

hi,Luis,excellent! millions of thanx!

this is exactly what i need!

I really appreciate your help!

i had searched the whole web ,but got nothing about the programmatical way, i m sure the atlas document is a lot of way to go.

now you give me the answer,thanx again! ;-)

Good stuff - When I look at this code, I wonder "now, how did Atlas make writing javascript less complex, etc... ?"

I guess the answer is in the declarative code model isn't it?

hello guys.

well, i must say that the code is still a little bif far from perfect. it would be nice to build a more general template so that it could be used in all the scenarios. if i have time, i'll come back to it (though i really doubt it, because each day only has 24 hoursand I'm already on the 2nd hour of the next day :) )

;-) hi ,Luis,

you're right,time is limited.

i think you need some sleep now ,health is a lot important too ;-)

thanx again for your help.

Hi -

This can be done with a little short hack:

var cue = document.createElement('li');  // add styling
var dct = Function.emptyFunction;
dct.createInstance = function(c) { return { instanceElement: cue } };
##ZONE##.set_dropCueTemplate(dct);

Not really a proper solution but a hack to get DND list working if you don't want to create a ITemplate class. 

AO

hello.

i hadn't thought about that...

Of course .. you could always just create an extender, which has a string property for the name of the template .. which you then just use in the RenderInnerScript and RenderScript overrides ...

 

protected override void RenderInnerScript(Microsoft.Web.Script.ScriptTextWriter writer, DragListProperties props)
        {
            base.RenderInnerScript(writer, props);

            // The dragDropList needs two template properties to function. One is the dropCueTemplate,
            // which is the "you can drop here" look, and the emptyCueTemplate which is 
            // shown for empty lists.
            // This content will be rendered as a child tag of the behavior element.

            SerializeTemplateProperty("DropCueTemplate", "dropCueTemplate", writer, props);
            SerializeTemplateProperty("EmptyTemplate", "emptyTemplate", writer, props);
        }

    protected override void RenderScript(Microsoft.Web.Script.ScriptTextWriter writer, Control targetControl)
    {
        DragListProperties properties (DragListProperties)base.GetTargetProperties(targetControl);
    
        if (properties != null)
        {
             writer.WriteStartElement("dragDropList");
             writer.WriteAttributeString("dataType", properties.DataType);
             writer.WriteAttributeString("acceptedDataTypes", properties.AcceptedDataTypes);
	     writer.WriteAttributeString("dragMode", properties.DragMode.ToString());
            writer.WriteAttributeString("direction", "Vertical");
            // Render the children elements
            this.RenderInnerScript(writer, properties);
            writer.WriteEndElement(); //dragDropList
       }
   }

private void SerializeTemplateProperty(string propertyName, string templateName, Microsoft.Web.Script.ScriptTextWriter writer, DragListProperties properties)
        {
            PropertyDescriptor tempLayoutProp = TypeDescriptor.GetProperties(properties)[propertyName];

            string strValue = SerializePropertyToString(properties, tempLayoutProp, true);
            if (strValue != null)
            {
                writer.WriteStartElement(templateName);
                writer.WriteStartElement("template");
                writer.WriteAttributeString("layoutElement", strValue);
                writer.WriteEndElement(); // template
                writer.WriteEndElement(); // templateName
            }
        }

  This all works fine by the way, as I have a DropDownList implemented in this fashion.