Topic: Issue rendering mdbdatatable

DashMarketingGroup priority asked 5 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 5 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')
  })
};


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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