postEdit example to retrieve some values

dhutton@creativeone.com

Hi all, could you help me with an example of an editor.on(' postEdit'...) to retrieve some values? Specifically I need:
- the value that was changed (I'm using editor.inline(this, { onBlur: 'submit' }, { submit: 'changed' });)
- another value that's always in column 1 on the same row that the change occured
- and the column title

I'm able to grab a column header in a submitSuccess by using the following below lines
var columnIndex = userTable.cell(cell).index().column;
var columnTitleObject = userTable.column(columnIndex).header();
var columnTitle = $(columnTitleObject).html();
(with the above, cell is defined in $tableName).on('click'... but a click listener doesn't work with a postEdit since the user could've clicked another element that triggered the change event - I need the data posted not the currently-clicked

I think the value that was changed as well as the value on column 1 of the same row should hopefully be more straight forward.

TIA!

allan

postEdit passes the information you need (minus the column title), but you'll need to parse it to some degree - the signature for the callback is:

function( e, json, data, id )

data here is the data for the whole row. So if you are using array source you could do data[0] otherwise you could do data.myProperty if you are using objects.

Generally the changed value could be a little tricky since there can be multiple rows edited (so you'd need to loop over json.data[]), but since you are using inline editing here, it only supports a single cell at a time:

Object.keys( json.data[0] )

will get you the keys (i.e. the field names) for the data that was submitted to the server. Since there is just one field, it will be the first and only key in the returned array.

Then you can get the data value using json.data[0][key].

Finally you need to map from the field name (the key) to the column. column().dataSrc() can be used to get the column data points, so you can loop over the columns (columns().every()) to find the matching column.

Allan

dhutton@creativeone.com

I'm a bit confused on this one, I don't just get the field names that were changed I get all the field names:

Object.keys( json.data[0] )

will get you the keys (i.e. the field names) for the data that was submitted to the server. Since there is just one field, it will be the first and only key in the returned array.

In my code:
editor.on('postEdit', function (e, json, data, id) {
columnTitle = Object.keys(json.data[0]);
console.log("columnTitle was " + columnTitle);
});

My Object.keys( json.data[0] ) returns all of my column names even in inline edit submit on change and the one that's changed is intermixed in with the rest of them regardless of what I change.

console.log output

columnTitle was DT_RowId,agent_id,email,phone_number ...

So how do I get the key of the column that changed?

dhutton@creativeone.com

Also I'm just using the column header to self-identify what was changed, would it be easier to fetch the id of the dropdown (or cell?) that was changed? It's one click and one change (component blur or hit enter key to submit) and a secondary action needs to happen on that - for that secondary action I need the name of the thing they changed, the value they changed it to and a value in that same row that lives in column 1.

allan

Hmm sorry - I've just been experimenting with this and it would have worked with older versions, but with the newer the client-side will automatically extend the row data with the unpopulated values (to mitigate the need for always sending back the whole data row, even if fields were unmodified).

Lets go with a much easier approach!

editor.on('postEdit', function (e, json, data, id) {
  var cell = editor.modifier();
});

The modifier() method returns whatever was used to trigger the editing (here it is this from editor.inline(this...);.

You can then use cell().index() to get the row and column information about the cell.

Allan

dhutton@creativeone.com

Alright, it's nasty but I think it's going to work. Please let me know if you see any red flags. I especially don't like the way I'm grabbing the email

    editor.on('postEdit', function (e, json, data, id) {
        var modifier = editor.modifier();

        if (modifier) {
            var columnIndex = modifier.cellIndex;
            var columnTitleObject = userTable.column(columnIndex).header();
            var columnTitle = $(columnTitleObject).html();
            var newValue = modifier.innerText.trim();
            var email = modifier.parentNode.innerText.trim();
            var sep = "\t";
            var rowValues = email.split(sep);
            email = rowValues[0];
            console.log("Email of the person changed was " + email);
            console.log("Column name was " + columnTitle);
            console.log("New value was " + newValue);
        }

    });

allan

modifier.cellIndex

This will go belly up if you have hidden columns. Need to use cell().index().

var email = modifier.parentNode.innerText.trim();

Could you just do table.row( modifier.parentNode ).data().email? (or ...data()[0] if you are using arrays).

Allan

dhutton@creativeone.com

For email the below worked great! Thanks for pointing it out
table.row( modifier.parentNode ).data().email

I ran a test on the use of modifier.cellindex when using hidden fields and I see what you mean - index 5 becomes a different column. Can you give an example of how I would use the api as you mentioned to get a consistent index?

Thanks!

dhutton@creativeone.com

<?php ? ?>

colin

As Allan said, cell().index() will give you that consistent index.

dhutton@creativeone.com

Can you give an example of how I would use the api as Allan mentioned to get a consistent index?

allan

var columnIndex = table.cell(modifier).index().column;

should do it (assuming your DataTable instance is called table - modify it as needed if not.

Allan