Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Cannot access row data when edit event is activated in editable table. Showstopper. Any workarounds?

FWUser priority asked 3 years ago


Just as the title reads. In any other event, I can access row data. Consider this example:

    tableDocks.addEventListener('add.mdb.tableEditor', (e) => {
        let conceptsObject = {
            concepts: $('#Concepts').val()
        }
        SaveDock(Object.assign(e.row, conceptsObject));
        const alert = document.getElementById('alert-add-entry');
        const alertInstance = mdb.Alert.getInstance(alert);
        const { name } = e.row;
        alert.innerHTML = `<strong>Record with port name, "${name}" was added succesfully</strong>`;
        alertInstance.show();
    });

You see right there how I can access the row within the event using "e.row"? With that, I have all the data I want. However, in the edit listener, I don't have the row data.

tableDocks.addEventListener('edit.mdb.tableEditor', (e) => { //Here, e.row is undefined. });

So, how I am supposed to get the data from the row? Because I need to populate another listbox based of an id of one of the columns of the clicked row. I just can't phantom why you won't populate the row property with data when the edit event occurs.

Any workaround to access the data in this case?

Thank you


Dawid Wajszczuk staff answered 3 years ago


Hi,

You can try something like this:

table.addEventListener('edit.mdb.tableEditor', (e) => {
  const alert = document.getElementById('alert-update-entry');
  const alertInstance = mdb.Alert.getInstance(alert);
  setTimeout(()=>{
    const row = document.querySelector('.edited-row')
    const company = row.querySelector('[data-mdb-field="company"] input').value
    const office = row.querySelector('[data-mdb-field="office"] input').value

    alert.innerHTML = `<strong>Edit entry:</strong> ${company} (${office})`;

    alertInstance.show();
  },0)
});

Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3564267#js-tab-view.

Keep coding,
Dawid


FWUser priority commented 3 years ago

Tried it and it worked. Thank you.


FWUser priority answered 3 years ago


I solved the situation like this:

 $(document).on('click', ".edit-button", function () { 
         GetConceptsByDocks($(this).closest('tr').find('td:nth-child(2)').text()); 
  });

But your approach seems cleaner. I will try it and update this thread.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No