Topic: Issue rendering mdbdatatable
DashMarketingGroup priority asked 6 months ago
I am attempting to use an mdbdatatable in an ASP.NET web page, using the following code:
<div class="row mb-4">
<div class="col-lg-12 text-center fs-3 fcDarkBlue">MANAGE MEMBER ACCOUNTS</div>
</div>
<div class="datatable" id="dtAccounts" data-mdb-striped="true" data-mdb-hover="true" data-mdb-loading="true"
data-mdb-color="#fcf3cf" data-mdb-loader-class="bg-success" data-mdb-border-color="dark" data-mdb-fixed-header="true"
data-mdb-max-width="100%" data-mdb-sm="true" data-mdb-full-pagination="true" data-mdb-selectable="true">
</div>
<script>
$(document).ready(function () {
$("#btnExit").click(function () {
sessionStorage.removeItem("CustomerID");
document.location.href = 'home.aspx';
});
const formatCell = (cell, value) => {
const parent = cell.parentNode
parent.childNodes.forEach((child) => {
child.classList.add('fs-6', 'blackText')
})
};
const columns = [
{ label: 'Acct. #', field: 'AccountNo', format:formatCell },
{ label: 'Company', field: 'CompanyName', format: formatCell },
{ label: 'EIN', field: 'EIN', format: formatCell },
{ label: 'Balance', field: 'CurrentBalance', format: formatCell },
{ label: 'Credit Limit', field: 'CreditLimit', format: formatCell },
];
const asyncTable = new mdb.Datatable(
document.getElementById('dtAccounts'),
{ columns },
{ loading: true }
);
const customDataTable = document.getElementById("dtAccounts");
customDataTable.addEventListener('rowSelected.mdb.datatable', (e) => {
sessionStorage.setItem("AccountNo", e.selectedRows[0].AccountNo);
})
loadAccounts();
function loadAccounts() {
fetch('handlers/getaccountlist.ashx')
.then((response) => response.json())
.then((data) => {
asyncTable.update(
{
rows: data.map((companyaccount) => ({
...companyaccount,
AccountNo: companyaccount.AccountNo,
CompanyName: companyaccount.CompanyName,
EIN: companyaccount.EIN,
Balance: '$' + companyaccount.CurrentBalance.toFixed(2),
CreditLimit: '$'+companyaccount.CreditLimit.toFixed(2),
})),
},
{ loading: false }
);
});
};
});
</script>
When I execute the code, I get the following error in the developer console of the browser, and even though the table finishes rendering, it does not process the entire script, so events are not being added and so forth. Here is the error I get:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'add') at accounts.aspx:75:33 at NodeList.forEach () at Object.formatCell [as format] (accounts.aspx:74:31) at index.js:838:18 at Array.forEach () at index.js:832:13 at Array.forEach () at br._formatCells (index.js:827:10) at br._renderTable (index.js:790:10) at br._setup (index.js:557:10)
I do not know why this code throws this error and cannot find any other reference material to help. Thank you for your assistance!
Grzegorz Bujański staff answered 6 months ago
The error is caused by the formatCell
function, try changing it to:
const formatCell = (cell, value) => {
const parent = cell.parentNode
Array.from(parent.children).forEach((child) => {
child.classList.add('fs-6', 'blackText')
})
};
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.1
- Device: laptop
- Browser: chrome
- OS: win11
- Provided sample code: No
- Provided link: No