Multiple standalone inline editors within a complex table

chrisxaustin

This took me a little while to figure out, so I'm sharing the answer here in case it helps others.

I have a complex table that isn't compatible with datatables, but I wanted to use inline editors for some items within that table.
This seemed straight-forward since I created a new editor instance for each item and added a click handler for each cell.
The problem was that clicking any of the editable cells resulted in the editor being opened for the first such cell, not the current cell.

After stepping through Editor.prototype.inline -> _dataSource -> individual I found the answer.

identifier = $( identifier ).parents('[data-editor-id]').data('editor-id');

...

if ( ! identifier ) {
    identifier = 'keyless';
}

To have standalone editors that do not interfere with each other you need to have a parent element with a unique value for data-editor-id

I started with (simplified):

<td><div id="editor1" data-editor-field="foo"></div></td>

What I needed was:

<td data-editor-id="editor1"><div id="foo1" data-editor-field="foo"></div></td>

There are probably other fixes, but this worked for me.

allan

Awesome! Thanks very much for sharing this with us! That looks good to me.

Allan