Topic: Table Editor : How to prevent certain column display when editing?
Expected behavior
I want to remove display some column when editing rows because it has some customAction and includes html tags , it showed wrongly.
Actual behavior
cannot find a solution
Resources (screenshots, code snippets etc.)
const myProductsDatatableColumns = [
...
{
label: '',
field: 'customAction',
editable: false,
sort: false,
},
...
]
..Instance.update(
{
columns: myProductsDatatableColumns,
rows: rowsData.map((row) => {
return {
...row,
customAction: `<a role="button" class="check_selection" id="${row.code}"Details</a>`,
};
}),
},
myProductsDatatableOptions
);
How can I prevent the column with customAction to display when I click the 'edit' icon that Table Editor generate automatcally?
At the moment, there is no such option. But you can do it yourself in a simple way:
tableEditor.addEventListener('edit.mdb.tableEditor', (e) => {
setTimeout(() => {
const disabledEl = tableEditor.querySelectorAll('input');
disabledEl.forEach((el) => {
if (el.disabled) {
el.parentElement.style.display = 'none'
}
})
})
})
I prepared a snippet in which you can test it: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3590016#js-tab-view
linglecai commented 3 years ago
thanks very very much! I'll try to use in my project, and give u a feed back later.
linglecai commented 3 years ago
it worked as expected, many thanks! by the way, i do have an advice on our website code example, that please consider to not use anonymous function or handler in offcial docs. Because that could trouble many starters(like me before) , it can easily cause reading obstacle and also behave wrongly for example : add multiple eventlistner.
thanks very much ,your answer works like a charm!
Grzegorz Bujański staff commented 3 years ago
Thank you for your feedback! We will consider it.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.10.1
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No