Tags: ajax, aspnet, atlasuidragdrop, dragdroplist, guys, implement, interface, net, programatically, programmatically, struggling, sysuiitemplate

How to implement the Sys.UI.ITemplate interface programmatically

17,519 words with 12 Comments; publish: Sat, 05 Jan 2008 10:13:00 GMT; (10063.48, « »)

hi ,guys,

i 'm struggling with AtlasUIDragDrop.js, i want to use DragDropList programatically. i don't know how to implement theSys.UI.ITemplateinterface programmatically to make mydropCueTemplate and emptyTemplate work ,please help

<div>

<div id="content1Title" class="itemTitle">Content 1</div>

<%--<asp:Login ID="myLogin" runat="server"></asp:Login>--%>hello

</div>

<div id="content2Title" class="itemTitle">Content 2</div>

Dflying's Item

</div>

<div id="content3Title" class="itemTitle">Content 3</div>

<%--<asp:Calendar ID="myCalendar" runat="server" CssClass="centered"></asp:Calendar>--%>hello

</div>

</div>

</div>

Drop content here.

</div>

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!

http://net-ajax.itags.org/q_dotnet-ajax_26046.html

Explore Related Content On "ASP.NET AJAX"

All Comments

Leave a comment...

12 Comments
- hello.
  though i haven't uset it, i think using the Sys.UI.DeclarativeTemplate is the way to go
  #1; Sat, 05 Jan 2008 10:14:00 GMT
- 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
  #2; Sat, 05 Jan 2008 10:15:00 GMT
- 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.
  #3; Sat, 05 Jan 2008 10:16:00 GMT
- thanks Luis ;-)
  looking forward to your solution .
  #4; Sat, 05 Jan 2008 10:17:00 GMT
- 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="/app/links/?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>
  #5; Sat, 05 Jan 2008 10:18:00 GMT
- 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! ;-)
  #6; Sat, 05 Jan 2008 10:19:00 GMT
- 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?
  #7; Sat, 05 Jan 2008 10:20:00 GMT
- 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 :) )
  #8; Sat, 05 Jan 2008 10:21:00 GMT
- ;-) 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.
  #9; Sat, 05 Jan 2008 10:22:00 GMT
- 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
  #10; Sat, 05 Jan 2008 10:23:00 GMT
- hello.
  i hadn't thought about that...
  #11; Sat, 05 Jan 2008 10:24:00 GMT

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 elementsthis.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.

#12; Sat, 05 Jan 2008 10:25:00 GMT

ASP.NET AJAX

"ASP.NET AJAX" Knowledge

ASP.NET AJAX (.Net)

Tags: ajax, aspnet, atlasuidragdrop, dragdroplist, guys, implement, interface, net, programatically, programmatically, struggling, sysuiitemplate

How to implement the Sys.UI.ITemplate interface programmatically

Explore Related Content On "ASP.NET AJAX"