Data exchange between editable table and modal forms

Topic: Data exchange between editable table and modal forms

sundance free asked 4 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

Add comment

sundance free answered 4 years ago

0 0 Best answer

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?

<pre class="prettyprint"><code> $('#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');
</code></pre>

Please insert min. 20 characters.

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 commented 4 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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Opened

Specification of the issue

ForumUser: 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

sundance

207Support score
13Questions 14Answers 5Snippets