Adding onload event to "Modern" lists

(2) Share

Report

Posted on by CU25031755-0

I am able to easily add an onload event to regular lists on Power pages like this:

$(document).ready(function () {
    $(".entity-grid.subgrid").on("loaded", function () {
        //do something with list rows    
    });
});

however this does not work for modern lists. I read that I can possibly use a mutation observer, but is that the solution I should be using or is there something I am missing?
Any help would be greatly appreciated.

Categories:

General topics

I have the same question (0)

All responses (1)

Answers (0)

Suggested answer

Jon Unzueta 1,836 Super User 2026 Season 1 on at

Like
a
(1)

Report
Copy link

Link copied!
@CU25031755-0

You're absolutely right—modern lists in Power Pages (especially those rendered using the new Fluent UI or virtual tables) don't trigger the same loaded event as classic entity lists. So your jQuery on("loaded") approach won't work reliably.

✅ Why MutationObserver Is a Valid Solution

Yes, using a MutationObserver is a recommended workaround for modern lists. Since these lists are rendered dynamically (often via React or Fluent UI components), you need to watch for DOM changes rather than rely on traditional load events.

✅ How to Use MutationObserver in Power Pages

Here’s a basic example of how you can use a MutationObserver to detect when rows are added to a modern list:

$(document).ready(function () {

    const targetNode = document.querySelector(".modern-grid-container"); // Adjust selector as needed

    if (!targetNode) return;

    const config = { childList: true, subtree: true };

    const callback = function (mutationsList, observer) {

        for (const mutation of mutationsList) {

            if (mutation.type === 'childList') {

                // Check if rows are added

                const rows = targetNode.querySelectorAll(".modern-grid-row"); // Adjust selector

                if (rows.length > 0) {

                    console.log("Modern list rows loaded:", rows);

                    // Do something with the rows

                }

            }

        }

    };

    const observer = new MutationObserver(callback);

    observer.observe(targetNode, config);

});

🔍 Tips for Success

Inspect the DOM of your modern list to find the correct container and row selectors.

Use browser dev tools to identify when and how the list is rendered.

You can also debounce or throttle your logic if the observer fires too frequently.

🏷️ Tag me if you have any further questions or if the issue persists.

✅ Click "Accept as Solution" if my post helped resolve your issue—it helps others facing similar problems.

❤️ Give it a Like if you found the approach useful in any way.

Was this reply helpful? Yes No