id collision in subtable for parent table with embedded child table

louking · July 2020

Link to test case: http://live.datatables.net/venefohu/1/edit

Description of problem:

As a follow-up from https://datatables.net/forums/discussion/comment/175383/#Comment_175383, I'm trying to edit my table which was created in the manner of https://datatables.net/blog/2019-01-11.

I am seeing an issue with selection of rows in the child table. I think this is because the table in the child row has html id attribute which overlaps with the row's id attribute for the parent table. If I select a row in the child table which has the same id as the opened row, the row doesn't get selected, and the screen jumps to the parent table. And the child table reloads because it thinks the parent row was selected.

This can be seen by selecting the first row in the parent table, then the first row in the child table. If you select the second (or other) row in the child table the behavior is as expected.

Similarly you can select the second row in the parent table, then the second row in the child table to see this behavior. Selection of the first row in this case is ok.

I haven't debugged this thoroughly but believe the problem is likely because of the overlapping html id attribute values.

I don't suppose there's a way to override the id values as received from the server that are used for the id attribute? I'm using the id from my database, so it would be inconvenient to change from the server side (although that can probably be made to work if there's no other way).

louking · July 2020

I missed the comment by @miken32 on the bottom of https://datatables.net/reference/option/rowId and the associated reference to https://stackoverflow.com/questions/36663037/datatables-rowid-starting-with-a-number-issue/36663176#36663176 which indicates a function can be used for the rowId option.

I should be able to modify the id with the function on the way to the client. For edit, I'll have to "catch" this and change it back on the preSubmit event, I guess, so my server code won't have to change.

Is this standard behavior? Seems like it'd be good to update the docs if so.

If this won't change I can probably make use of this undocumented feature, and the question can be closed.

louking · July 2020

My assumption was wrong -- see http://live.datatables.net/xeceyina/1/edit

Adding a rowId function to the child table which forces unique row id didn't fix the problem.

Any ideas?

where usersTable is defined I added the following

      // ADDING THIS DOESN'T SOLVE THE PROBLEM
      rowId: function(r) {
        return 'unique-' + r.DT_RowId;
      },
      // END ADD

kthorngren · July 2020

Looks like the child row select event is bubbling up to the parent which is causing the parents select event handler to run which opens the respective child row. Traced this using the browser's debugger.

Added a select event handler to the child table:

    var usersTable = table
    .on('select.dt', function (e) {
      e.stopPropagation();
    })
    .DataTable({

http://live.datatables.net/yekahama/1/edit

Which seems to fix the problem. Let use know if it works for your full solution.

Kevin

louking · July 2020

Will I be able to use the editor on the child table if I use that select handler?

I was about to post:

I was able to resolve this by adding some code to the select.dt and deselect.dt events. See http://live.datatables.net/ziguhepe/1/edit (compare to behavior in http://live.datatables.net/xeceyina/1/edit)

      // NEED TO ADD THIS
      if (dt.context[0].sTableId !== siteTable.context[0].sTableId) return;
      // END ADD

I suspect I'm working around a problem in datatables, but am not sure. Is this worth having @allan or @colin look at?

kthorngren · July 2020

Will I be able to use the editor on the child table if I use that select handler?

Thats why I asked you to let us know if it works for what you want. I didn't build it out to try it but I would suspect it will work.

Kevin

louking · July 2020

Thanks -- will continue working on this and let you know the result.

louking · July 2020

For some reason your solution in http://live.datatables.net/yekahama/1/edit doesn't always stop propogation to the parent table. Try selecting the first row of the parent table, then click around to different rows of the child table.

kthorngren · July 2020

The problem I see is if you click to deselect a selected row it closes the child row. Added:

    .on('deselect.dt', function (e) {
      e.stopPropagation();
    })

http://live.datatables.net/yekahama/2/edit

Is that the problem you are seeing?

Kevin

louking · July 2020

Yes that seems to resolve it, thanks

My solution in http://live.datatables.net/ziguhepe/1/edit also seems to work ok. Not sure if one of these is better than the other, but I guess with my solution I am digging into datatables internals which may not be recommended.

Still debugging some of my own logic problems getting the child editor to work.

louking · July 2020

I think this resolves the problem I was seeing. If I get stuck again downstream I'll open another question. Thanks again.

kthorngren · July 2020

I guess with my solution I am digging into datatables internals which may not be recommended.

Not generally - but I use the same for search plugins (shh don't tell Allan ). Its recommended to use an API if possible. You can replace dt.context[0].sTableId with $(dt.table().node()).attr('id'), for example:
http://live.datatables.net/gucerupi/1/edit

Kevin

louking · July 2020

I'm currently using the stopPropagation() solution you recommended, and will only back out if needed. I've made a note of your suggestion for use of .attr().

Thanks again for all your support.

id collision in subtable for parent table with embedded child table

id collision in subtable for parent table with embedded child table

Answers

Howdy, Stranger!

Categories

DataTables

id collision in subtable for parent table with embedded child table

id collision in subtable for parent table with embedded child table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables