Update cell attribute after inline edit

msand01

Is there a way to update the title attribute of a cell with the newly edited data value after an inline edit?
I currently use the createdCell callback function to add a title to the td when the table is created:

function (td, cellData, rowData, row, col) {
    $(td).attr('title', cellData)
}

Is there a way to update the title attribute (or any other attr I guess) after an inline edit?

allan

postEdit is the way to do this. Use the information passed in to give you the row id (usually data.DT_RowId) which you can use as a row selector - that can then be used with cell().node() to get the node for the target cell and update its attributes.

Its more cumbersome than it perhaps should be. This is something I know I need to look at improving.

Allan

colin

Hi @msand01 ,

Take a look at this example here - this is showing what you're after. It's updating the attr in the postEdit so it will work with both inline and form editing.

Cheers,

Colin

msand01

Thank you for that great example, that was very nice of you to do that!
When I implement it I get DT_RowId is undefined. I think it might be because my data is not defined in the html, but from a json object.

msand01

Is there perhaps another way to get the cell id?

colin

Hi @msand01 ,

There should be an identifier still that you can use, as it needs it to update the data. In that postEdit event handler, could you add

console.log(data)

and send the results. You may see the ID there.

Another useful option, is if you could make a test case, like my example, with your data - then we could take a nose from here.

Cheers,

Colin

msand01

I have created a test case here: http://jsfiddle.net/u1dg5c6k/12/
where you can see that data.DT_RowId is undefined.
I have also added a console.log(data).

Thank you in advance for any insights.

colin

Hi @msand01 ,

I just tried that link - and everything worked as planned, there are no errors. Also, I couldn't see any console.log()s. Could you let us know how to reproduce the error please.

Cheers,

Colin

msand01

I apologize, it looks like I didn't update after my last addition, which was this:

        dtEditor.on('postEdit', function (e, json, data) {
            console.log(data);
            dtTable.cells('#' + data.DT_RowId, '').every(function () { //data.DT_RowId is undefined
                $(this.node()).attr('title', this.data());
            });
        });

I have updated it this time: http://jsfiddle.net/u1dg5c6k/13/

To be clearer, what I am wanting to do after an inline cell update, is to update another cell in that same row, and also update the title attribute in that original updated cell. I am unsure how to do those two things. I can get to my unique id, data.Id, but not DT_RowId, which is undefined. I believe I would need that to get to the whole row and update things from there, using the API, but I am unsure of that even. I think I am just a bit ignorant of how to go about this in general.

Thanks again!

allan

DT_RowId is the default parameter name that DataTables (and also Editor) will look for the row id. In DataTables you can override it using rowId. In Editor you can use idSrc.

You have that setup for Editor, but not for DataTables. Use rowId: 'Id' in your DataTables initialisation to tell DataTables where your row id is, then you will be able to do:

dtTable.cells('#' + data.Id, '')

and entirely forget the DT_RowId stuff (since you are changing the location of the row id).

Allan