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