Update and submit cell based on click

csyu

Hello,

Setup:
I have Datatable/Editor with 10 columns which can be edited inline without issue. Nine columns are editable and the tenth one is not.

What I'm looking to do
The column that is not editable contains a button that when clicked, will fetch data from the server and update one of the nine columns in the row where the button was clicked.

Problem
Although I'm able to fetch the data when the button is clicked and update the right cell in the row, I cannot figure out how to submit the single cell to persist the change in the database.

My code
Attempt #1:

var cell = table.cell('#'+rowId,'exchange_rate:name');
cell.data(fetched_rate);
editor.inline( cell.node(), { onChange: 'submit' });

Attempt #2:

var cell = table.cell('#'+rowId,'exchange_rate:name');
editor.edit( cell, false ).set( 'exchange_rate', fetched_rate ).submit();

I also tried code with MultiSet, but alas, no luck.

Any help would be appreciated.

Thank you.

colin

I would have expected that to work. This example here is copying your second attempt - pressing the "set" button causes the position field for "Ashton Cox" to update.

What happens in your code when you make those calls?

Colin

csyu

Indeed Colin, I would have expected the second attempt to work as well... because the documentation clearly states that the editor can accept a cell.

When I execute attempt #2, I get an error because somehow, the editor is submitting the whole row... not the single cell. For clarity, because the whole row is submitted, the error I get is due to the fact that one of the fields in the row (that I do not want to submit) isn't set, so a get a "required field" error.

When I change the code to this:

var cell = table.cell('#'+rowId,'exchange_rate:name');
editor.edit( cell, true ).set( 'exchange_rate', fetched_rate );

I can confirm that the whole row is being displayed in the editor popup - not the single cell.

csyu

Looking at your code, I do see a small difference ... it shouldn't matter, but it's there. You reference the cell simply by indicating "position" not "position:name"

editor.edit('#3', false).set('position', 'xxx').submit();

I will try to do the same thing in my code to see what happens. Right now, I am fetching the cell (albeit successfully) with:

('#'+rowId,'exchange_rate:name')

csyu

Quick follow-up: It definitely doesn't work as expected... the whole row is submitted, not just the cell.

The documentation (https://editor.datatables.net/reference/api/edit()) clearly states that the "items" parameter can be a cell-selector type. It says: Row, columns and cells: An object can be given that contains one or more of the properties rows, columns and cells which can take the values of row-selector, column-selector and cell-selector respectively. This allows a whole column or individual cells to be edited if required.

I wonder if you (Colin) or anyone else has an example of submitting only one cell + the unique identifier working?

csyu

Another update:
I even tried the following code - again, from the documentation:

editor.edit( {
   cells: table.cell('#'+rowId,'exchange_rate:name').index()
} );

This time, I get the pop-up window with the single cell but on submit, I get an error for another field (quantity) which I do not want to submit:

I'm stumped. If you're wondering, the form is submitted by hitting "enter".

csyu

Solution:

I was able to edit a single cell by writing this code:

editor.edit('#'+rowId, false).submit(null,null, function(dataToSend){
  dataToSend.data[rowId] = {};
  dataToSend.data[rowId]['exchange_rate'] = exchange_rate;
});

In a nutshell, I'm clearing everything from the data that is being sent to the server except for the exchange_rate field. This works because the action remains "edit" and the key to the data array is the row id.

Thank you.

colin

Glad all sorted, thanks for reporting back,

Colin