Dropdown in fix columns

doruccia

I have a datatable and a button that allows the user to fix columns.
I used this code and it works:

var obj_table = $("#example").DataTable();
new $.fn.dataTable.FixedColumns(obj_table, {
    leftColumns: 1,
    heightMatch: "auto"
} );

The problem is that in the header there are dropdown, and when fixing columns they lose their value.
I think it's because after fixing columns the id's in the page are duplicated.
This happens for fixed header as well indeed, but it does not seem to create any problem. At the moment, at least.
Does somebody know how to help?

colin

Hi @doruccia ,

You had some script errors. I recreated it here, and it's working as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example.

Cheers,

Colin

doruccia

Hi @Colin,
your script didn't work on any browser I tried: Chrome, Firefox and IE.
The page didn't give any debug message and any log output, clicking the button it just fixed columns and lost dropdown selected value :-(

allan

The issue here is that FixedColumns will clone the elements which includes child nodes (i.e. the options in the select) but that does not include the properties - specifically which option is selected. That's just how a clone works in the DOM.

What would need to be done is get the original values and then set the values in the newly cloned dropdowns. You could do that on the draw event.

However, you would also need to sync it back the other way. So if someone changes a value in the dropdown, you would also need to update the original element. That again is possible, but its not trivial.

Generally speaking I'd actually recommend that live elements such as select not be used in FixedColumns for this reason.

Allan