Forum Discussion

JLedgerwood's avatar
JLedgerwood
Data Storage
10-23-2024

Usage of MutationObserver in Pivot2 Widget

Is it possible to use the MutationObserver in a Pivot2 Widget?  Using the code below, I'm not seeing the log statements within the console from within the "each".  By step debugging I can see that the MutationObserver is created but the loop is not getting executed even once.  My Pivot table has five rows and the elementToObserve variable is created and is valid.  I've tried the "domready" event and the "initialized" event but the same issue persists, the loop is not run.  I have verified that the Pivot table is within a "table body" so that selector is fine.  Any help is greatly appreviated.

 

widget.on('ready', function (ev, se) {
 
  console.log("ready");
 
  const elementToObserve = $('table tbody', element)[0];
  const linkObserver = new MutationObserver(function(elements) {
    for(const element of elements) {
      console.log("ready-MutationObserver ");
      if (element.type === 'childList') {
        $.each(element.addedNodes, function(index, value){
            console.log("ready-MutationObserver value is " + value);
        });
      }
    }
  });
 
  linkObserver.observe(elementToObserve, {subtree: true, childList: true});
 
});
Developers

1 Reply

  • JeremyFriedel's avatar
    JeremyFriedel
    Sisense Employee
    10-28-2024

    Yes, this is possible, the example and article linked here is an example of this functionality.

    This script example in question is below:

     

    widget.on('domready', function (se, ev) {

    const alignNumbersToTheRight = () => {
        console.log('aligning numbers to the right...')
        $('td', element).each(function () {
            if (/^[0-9,.]*$/.test($(this).text())) {
                $(this).css('text-align', 'right')
            }
        })
    }

    alignNumbersToTheRight()
    // Observe changes in the table body
    const elementToObserve = $('table tbody', element)[0]
    const observer = new MutationObserver(function (e) {
        alignNumbersToTheRight()
    })

    observer.observe(elementToObserve, { subtree: true, childList: true });
})

     

    Modifying the example to log the values is straightforward, as shown below:

    widget.on('domready', function (se, ev) {

    const exampleFunction = () => {
        console.log('Observing Cells')
        $('td', element).each(function () {
            if (/^[0-9,.]*$/.test($(this).text())) {
                console.log('Cell Value is ', $(this).text())
            }
        })
    }

    exampleFunction()
    // Observe changes in the table body
    const elementToObserve = $('table tbody', element)[0]
    const observer = new MutationObserver(function (e) {
        exampleFunction()
    })

    observer.observe(elementToObserve, { subtree: true, childList: true });
})

     

    Many customization scripts that would potentially involve a MutationObserver with a Pivot table type widget can instead use the Pivot 2.0 API which can be more straightforward.