Row data is destroyed when using a mdb-select field


Topic: Row data is destroyed when using a mdb-select field

darrenh65 pro premium asked 4 years ago

I have noticed that when the edit modal is closed (using mdbEditor) the data in the row is broken from the the location of the select input to the end of the row. I have used a technique provided to me on the support forum here for adding the mdb-select field, i.e. using a placeholder, but I cannot see why the row data is being destroyed the way it is.

I have provided a snippet to demonstrate: https://mdbootstrap.com/snippets/jquery/darrenh65/2820345


Marcin Luczak staff answered 4 years ago

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


darrenh65 pro premium answered 4 years ago

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


darrenh65 pro premium answered 4 years ago

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?


Marcin Luczak staff answered 4 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: PC
  • Browser: Chome/Firtecfox
  • OS: Win10/Linux
  • Provided sample code: No
  • Provided link: Yes
Tags