[Dojo-interest] Drag a row of a FilteringTable to another FilteringTable

M. van Kampen maarten at contemplated.nl
Sun Sep 17 11:33:54 MDT 2006

Hello Antonio,

I ran in a similar problem and extended the FilteringTable widget to 
support drag&drops from similar tables. Code of the class is given 
below. Just use 'FilteringTableDND' as widgetType and it should work. 
Note that this implementation does delete the source object (just change 
onDrop if this is not wanted). Also, it relies on unique 
valueFields/value attributes in the table rows.


Maarten van Kampen



      var self = this;
// clear all DndSource's when our data-container is cleared (e.g. by 
calling this.reset)      
      dojo.event.connect(this.store, "onClearData", function(){
          var data = self.store.get();
            for(var i=0; i<data.length; i++){
              if (data[i].dnd) {
// clear DndSource when item is removed           
        dojo.event.connect(this.store, "onRemoveData", 
    }, {
// default DND type, over-ride by adding attribute 
'dnd_type="your-type"' in HTML
  dnd_type: 'tr',
// over-ride createRow to add sourceTable to HtmlDragSource. Note: using 
// here, since this.inherited() did not function after over-riding 
// (and calling the original postCreate with this.inherited()
  createRow: function(obj) { 
   var row = this.constructor.superclass.createRow.apply(this, arguments);
   obj.dnd = new dojo.dnd.HtmlDragSource(row, this.dnd_type);
   obj.dnd.sourceTable = this;
// FilteringTable's initialize adds events to the storage object, storing
// references to its OWN OBJECT. Therefore, the eventhandlers will not
// be affected by our over-rides. This behaviour is unwanted. Therefore,
// we use FilteringTable's initialize executed in our context.
// Unfortunately, we now cannot add event-handlers here
    initialize: dojo.widget.FilteringTable.prototype.initialize,

// over-ride postCreate to add DND handler
  postCreate: function() {  
    var target = new dojo.dnd.HtmlDropTarget(this.domNode, [ 
this.dnd_type ]);
    var _this = this;
     target.onDrop = function(e) {    // disable standard drop action, 
inserting into a filtered/sorted table
          var drag_row = e.dragObject.dragSource.domNode; // html in 
dragged object (tr element)
          var drag_valueField = dojo.html.getAttribute(drag_row, 
"value"); // value-attribute of row          
          var target_row = dojo.html.getParentByType(e.target, "tr"); // 
row in which we are dropped
          var target_valueField = dojo.html.getAttribute(target_row, 
"value"); // valueField to which we are dropped
          var sourceTable = e.dragObject.dragSource.sourceTable; // 
table where draw_row came from                              
          if (_this.store.getDataByKey(drag_valueField)) return(false); 
// exists already!
          var drag_obj = 
sourceTable.store.getDataByKey(drag_valueField); // data connected to 
the dragged row                             
    return(this.inherited('postCreate', arguments));          

Tom Trenka wrote:
> Probably you're going to have to attach some code to the drag operation that
> alters the underlying data model for both tables; the sorting and filtering
> that happens on a FilteringTable is done through the underlying SimpleStore,
> and not through the table itself (it's a little hard to explain; the actual
> methods are part of the table but the data it checks is from the store).
> What you'll probably want to do is add an onDrop handler that gets the data
> object from the original filtering table and adds it to the new one; using
> addData will cause a filtering table to add the HTML representation to the
> widget (i.e. add a row) and make it available for use.
> trt
> (I don't know the DnD code at all, so someone else might have to point you
> in the right direction for exactly *where* you'd attach that code.)
> Antonio Frongillo wrote:
>> hi,
>> i want to drag a row of a filtering table to another filtering table.
>> I've tried with this code:
>> var dl = dojo.widget.byId("testTable");
>> var dlbis = dojo.widget.byId("testTable2");
>> var dropTable = new dojo.dnd.HtmlDropTarget(dlbis.domNode, ["li1"]);
>> var lis = dl.domNode.getElementsByTagName("tr");
>> for(var x=0; x<lis.length; x++){
>> 	new dojo.dnd.HtmlDragSource(lis[x], "li1");
>> }
>> I can drag an element from a table to another but there is 2 things that
>> isn't good:
>> - the dragged element isn't sortable
>> - when i drag an element from testTable to testTable2 the element is
>> deleted
>> from testTable (instead i want that it remains in both table).
>> i think the first problem depend on the fact i drag the TR htmlElement and
>> not the dojo object, but i don't know how to do.
>> Can anyone help me?
>> thx in advance,
>> Antonio
>> _______________________________________________
>> Dojo FAQ: http://dojo.jot.com/FAQ
>> Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
>> Dojo-interest at dojotoolkit.org
>> http://dojotoolkit.org/mailman/listinfo/dojo-interest

More information about the Dojo-interest mailing list