Data exchange between editable table and modal forms


Topic: Data exchange between editable table and modal forms

sundance asked 5 years ago

Hello!

How can I manage data exchange between editable tables and modalEdit form? How can I make it work?

I copied complete sample from tutorial, and I added the following rows:

  <link rel="stylesheet" href="../mdbe487/css/addons/table-editor.min.css">
  <script  type="text/javascript" src="../mdbe487/js/addons/mdb-editor.min.js"></script>

Expected behavior

  • Fields of modalAdd form can be saved,

  • data of selected row appears in modal edit form, data can be saved after editing,

  • clicking on delete button deletes selected row,

etc.

Actual behavior

Table edit does not work as expected, only validating entered data seems to work.

Resources (screenshots, code snippets etc.)

Best regards,

István


sundance answered 5 years ago

Problem partially solved as I replaced $('#dtData').DataTable row with $('#dtData').mdbEditor . Unfortunatelly important features I used earlier stopped working. There is no language translation, paging and sorting options, etc. How to migrate DataTable properties to mdbEditor? Which properties are inheritable? Which properties should I omit and delete?

  $('#dtData').mdbEditor({

  headerLength: 7,
  evenTextColor: '#000',
  oddTextColor: '#000',
  bgEvenColor: '',
  bgOddColor: '',
  thText: '',
  thBg: '',
  modalEditor: true,
  bubbleEditor: false,
  contentEditor: false,
  rowEditor: false,

  // $('#dtData').DataTable descendants
  //mdbEditor: true,
  language: languageHU,
  autoWidth: true,
  select: true,
  filter: false,
  paging: true,         // false to disable pagination (or any other option)
  lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
  pagingType: "full_numbers", // "full", "simple" option for 'Previous' and 'Next' buttons only


  // SORTING ---------------
  "order": [[ 1, "desc" ]],

  columnDefs: [{
    orderable: false,
    targets: 3
  }],

  dom: 'Bfrtip',
  buttons: [{
    text: 'Összes kiválasztása',
    action: function () {
      table.rows().select();
    }
  },
  {
    text: 'Kiválasztás törlése',
    action: function () {
      table.rows().deselect();
    }
  }
  ]   

});

$('.dataTables_length').addClass('bs-select');

MDBootstrap staff pro premium priority commented 5 years ago

Hi, I believe you just mentioned all the properties that don't work with mdbEditor. I need to admit that it all should work in both functions but for now, you need to pick which one you prefer. If you notice any other properties that don't work in your mdbEditor please share the list with us. We will test if they can be implemented in both functions.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.7
  • Device: PC
  • Browser: Chrome
  • OS: Windows 7 Prof. 64-bit
  • Provided sample code: No
  • Provided link: No