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 ?
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();