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
                        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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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