5

I've added a new column in Tabulator with this column definition 

table.addColumn({title:"idCopy", field: "idCopy" ,sortable:false, formatter:uploadID,width:100, align:"center",cellClick:function(e, cell){
  function selected(){
    var fileName = formInput.value;
    cell.getRow().getData().idCopy = fileName;

  }
var f = document.createElement("form");
var formInput = document.createElement('input');
formInput.onclick = "selected(cell,f,formInput)" ;
var s = document.createElement("input");
s.setAttribute('type',"submit");
f.appendChild(formInput);
f.appendChild(s);
f.onClick = formInput.click();
}}, false);

I've added more lines to define each form with ID similar to this f.id = "f_" + cell.getRow().getData().id ; so each form is unique and uploadID function look like this 

  var uploadID = function(cell, formatterParams, onRendered){ 

return "<i class='fa fa-print'>upload ID</i>";

which is what i got from the official resources http://tabulator.info/docs/4.1/format#icon the problem is whenever i pick the file cell.getRow().getData().idCopy has the value of fileName which is exactly what i wanted but on the table's cell it still says upload ID instead of the value of fileName's value

so the user will have no idea that he have just picked the file and the system is ready to upload it.

is there is a way to replace upload ID with the fileName value or refresh those cells ?

LoopingDev
  • 754
  • 2
  • 10
  • 32

2 Answers2

4

If you are changing any data in the row then you need to call the update function on the row component for that row, passing in the updated data parameters:

row.update({id:"f_" +  cell.getRow().getData().id});

this will then update the values correctly

Oli Folkerd
  • 7,510
  • 1
  • 22
  • 46
1

I've fixed it by applying row reformat

first I've added a condition in var uploadID = function(cell, formatterParams, onRendered){}

for example :

var uploadID = function(cell, formatterParams, onRendered){ //plain text value
var x = cell.getValue();
if ( x == null ){ // do something}
else{ // do something }
return /*something*/;

then in cellClick:function(e, cell){}

I've added the following at the end of my code

    var row = cell.getRow();
    row.reformat();
LoopingDev
  • 754
  • 2
  • 10
  • 32
  • calling the reformat function will result in unnecessary rendering of the entire row, if you call the update function on the row component passing in the updated properties it will redraw only the fields that are changed – Oli Folkerd Dec 12 '18 at 20:50