Row data is destroyed when using a mdb-select field

Hi,

The cause for breaking everything inside Datatable is multiple inside creating select for modal :

  const types_template = `
    <select id="formFooEdit" class="mdb-select" multiple>
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>`;

Probably Datatable is unable to get the value of multiple select and it corrupts all the other values. As far as I remember this was custom functionality and unfortunately at the moment I can not propose any other solution than removing multiple from your select initialization.

Regards, Marcin

Thanks Marcin, I'll have to give this some serious thought. I believe this is probably a show stopper. I need to use quite a few select multiples.

regards, Darren

Since this is essentially a display issue (I can successfully write the record back to the database) is it possible to refresh the editor?

I have tried executing the following on the modal close as part of an ajax call:

$('#alarm_notify_table').DataTable({
  destroy: true,
  data   : data.data,
  columns: data.columns
});

This partially works but seems to break the 'link' between the DataTable and mdbEditor. For instance when I select a row the modal opens but with no record loaded. If I also call the editor constructor again (I noticed it doesn't have a 'destroy' attribute):

$('#alarm_notify_table').mdbEditor({
  modalEditor : true,
  headerLength: data.length
});

I am unable to even select a row.

Is there a correct way to refresh the editor?

I have checked some possibilities and it seems that when you create multiple select inside mdbEditor modal, select create a list of inputs equal to the number of your select options. This is crucial here as data saved on the modal close is based on the number of input elements inside the modal, which in your example is higher than the original number of data elements in Datatable, that's why your data is overwritten by the multiple select options.

I've come to the 'hot-fix' which on modal button click prevent its default behavior and removes the list of multiple select inputs from the modal. It seems that fixes the problem, but as always with that kind of custom code, I recommend using it with caution.

Please see the snippet https://mdbootstrap.com/snippets/jquery/marcin-luczak/2822628

There is some issue with showing an updated value of the Foo data after modal reopen but I believe this is just a matter of reading the data from the table and properly assigning it to the multiple select. I hope that this will fix your problem with multiple select and you won't need to do custom code for refreshing the table.

Regards, Marcin