Editor Modifier - Clicking an element within a cell

gershco

Apologies, I'm currently unable to provide a demonstration link.

If editor is fired from a click on a cell, we receive the cell number (modifier.column), but when it is fired from an element within the cell (font awesome circle) then modifier does not provide cell number or index.

<td class=" columnCenter"><i class="fas fa-circle invoiceLineAuto"></i> <i class="far fa-circle invoiceLineZero ml-2"></i></td>

$("#receiptSalesTransaction").on('click', '.invoiceLineAuto', function(){

  row = $(this).closest("tr");

  receiptTransactionEditor.edit(receiptSettlementTable.rows(row).indexes(), false);
  receiptTransactionEditor.field('AllocCurrencyAllocatedAmount').set('123.78');
  receiptTransactionEditor.submit();      


});

receiptTransactionEditor.on('preEdit', function (e, json, data, id) {

    var modifier = receiptTransactionEditor.modifier();
    console.log(receiptSettlementTable.row(modifier).index()); //works
    console.log(receiptSettlementTable.cell(modifier).index()); //undefined
});

colin

Hi @gershco ,

I created this fiddle here with I believe demonstrates what you're saying. I get the same behaviour, which is expected, whether the click event listens for the entire cell or the icon within.

It's expected because modifier() returns information about the row(s) being edited, not the individual cell being clicked.

Maybe if you clarify and say what you're trying to do, we can offer some suggestions,

Cheers,

Colin

gershco

As editor inline has been activated, we are able to obtain cell number using modifier:

var modifier = receiptTransactionEditor.modifier();
cellNumber = modifier.column;

When clicking into an Allocated or Discount cell, modifier.column returns the correct cell number.

However when clicking on a filled or empty circle icon (which are inside a column with data: null), modifier.column does not return the correct cell number.

When the editor is in edit mode, we have different functions firing depending upon which cell has triggered the editor. We need to bind the correct functions to the click of these circle icons and therefore need to know which cell

kthorngren

When you inline edit a normal row the modifier() returns the td which is the node that Datatables can use as a row-selector or cell-selector. So this console.log(table.cell(modifier).index()); works and returns something like {row: 0, column: 1, columnVisible: 1}.

When you click on the circle invoking your click event you are using editor.edit(table.rows(row).indexes(), false); which seems to be what is resulting in only getting the row index when using modifier(). The row index is not enough to use as a cell-selector.

One option is to use a global variable and in the click event get the closest td (this.closest("td")) to save for the preEdit event. Use that to get the cell index.

I updated Colin's example to highlight this:
http://live.datatables.net/gofojidi/1/edit

If this technique works for you then you will need an if statement in the preEdit event to decide whether to use the table.cell(modifier).index() or the table.cell(colIndex).index(). Looks like if the first is undefined then use the second.

HTH,
Kevin