How to trigger event on Tabulator move rows

Question

Using latest Tabulator version 4.4. I need to trigger an event so I can capture the info about the row moved from one table to the next. The move works fine in the browser but there is never anything triggered, at least that I can see, that tells me what was moved. I've tried

  rowMoved:function(row){
        //row - row component
    }

but it never happens. I tried on both sender and receiver. I have a table with all possible questions, and another which will hold only specific questions dragged to it.

  var allquestions =  new Tabulator("#allquestions", {
  ajaxURL :  "includes/retrievequestions.php?id=All",
  rowMoved:function(row){
     //row - row component
     alert("row moved ");
 },
  height:"300px",
  layout:"fitColumns",
  pagination:"local",
  movableRows:true,
  movableRowsConnectedTables:"#thistemplatequestions",
  placeholder:"No Data Set available",
  paginationSize:40,
  paginationSizeSelector:[100, 200, 500, 1000],
  movableColumns:true,
  columns:[
    {title:"Question", field:"questiontext", sorter:"string", width:100, headerFilter:"input"},
    {title:"Description", field:"questiondescription"},
    {title:"Value", field:"questionvalue",  align:"center", width:100},
  ],
  });

  var thistemplatequestions =  new Tabulator("#thistemplatequestions", {
  ajaxURL :  "includes/retrievequestions.php?id="+$("#thisid").text(),
  movableRowsConnectedTables:"#allquestions",
  rowMoved:function(row){
     //row - row component
     alert("row moved ");
 },
  movableRowsReceiver: customReceiver,
  height:"300px",
  layout:"fitColumns",
  pagination:"local",
  placeholder:"No Data Set available",
  paginationSize:40,
  paginationSizeSelector:[100, 200, 500, 1000],
  movableRowsReceiver: "insert", //add rows when dropped on the table.
  columns:[
    {title:"Question", field:"questiontext", sorter:"string"},
    {title:"Description", field:"questiondescription" , headerFilter:"input"},
    {title:"Value", field:"questionvalue", align:"center", width:100},
  ],
  });

var customReceiver = function(fromRow, toRow, fromTable){
  alert("customer receiver ");
    //fromRow - the row component from the sending table
    //toRow - the row component from the receiving table (if available)
    //fromTable - the Tabulator object for the sending table

    if(toRow){
        toRow.update({"questiontext":fromRow.getData().questiontext});
        return true;
    }

    return false;
}

Also tried customReciever with no luck either. it never triggered.

I'm sure it can be done, I just cant work out how.

Any help greatly appreciated.

Answer 1

Looks like your tabulator definition for thistemplatequestions has duplicates of movableRowsReceiver. Remove the second one (movableRowsReceiver: "insert", //add rows when dropped on the table.) and your customReceiver will then be executed.

---

EDIT:

According to Tabulator documentation:

Note: The movableRows option must be enabled on both tables to move rows from one to the other.

It appears that you are missing movableRows: true in the thistemplatequestions Tabulator defintion.

Here is the snippet of code, based on yours, with the modifications I made to get things working:

var thistemplatequestions =  new Tabulator("#thistemplatequestions", {
  ...
  movableRows:true,
  movableRowsReceiver: customReceiver,
  ...      
  });

function customReceiver(fromRow, toRow, fromTable){
    //fromRow - the row component from the sending table
    //toRow - the row component from the receiving table (if available)
    //fromTable - the Tabulator object for the sending table

    console.log("New Row Received!"); 
    this.table.addRow(fromRow.getData(), undefined, toRow);
    return true;
}