Row reorder is breaking radio buttons.

jscode

I am trying to add the row reorder extension to my datatable but it breaks my radio buttons in other columns. The datatable has radio buttons that I added using the render option on the column. When I click and drag a row(Sequence column) or just click a cell on the sequence column, my radio button in a different column has it's selected radio unselected. Please see the jsfiddle link below. Can anyone help me figure out a way to prevent my radio's from breaking? I have tried many things but nothing works. Here is the jsfiddle link:

https://jsfiddle.net/matthewr123/sz9q234y/

Thank you.

allan

Hi,

The problem here is that when you click on a row to drag it a clone is created. That clone includes new radio buttons with the same name as the old ones (since it is a clone after all), and it also includes the checked attribute. Since only one radio button can be checked, when the newly created one is inserted into the document for the click and drag visuals, the old one is unchecked.

How to fix? There are a few options:

1. Rather than cloning the original row it could just draw a rectangle with nothing else in it - that looses some visual information though.
2. Elements such as inputs could be removed, although that would look odd since others are kept.
3. Change the name for input elements, but then the dragged row might be out of sync with the main row if the checked state had been changed by the end user.

I'm not sure what the best fix is here (other than not to use radio inputs in draggable rows).

Allan

jscode

Allan,

Thank you for your answer. I decided to abandon the row reorder extension and just create up/down buttons that changes the order field values and then sort ascending on the redraw. This way, the display and data is changed and ready for me when I need to save to the server and I don't have to worry about swapping or cloning of data or rows. Thank you again.