Cannot access row data when edit event is activated in edita


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

FWUser pro premium 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 pro premium priority commented 3 years ago

Tried it and it worked. Thank you.


FWUser pro premium 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
  • User: Pro
  • 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