Run Event Listener When Grid Edit is Opened - Not Click

[kpcollier]

I'm trying to figure out a way to run an event when the Grid Edit page is opened and fully loaded on a tabular report page. I am trying to avoid using the click event for when the user clicks on the Grid Edit button, because I want the script to run only when Grid Edit is OPENED, and not when it is closed. Is there any other way to run an event specifically when grid edit is opened?

For more info on the workflow I am using, I have 12 number fields that are labeled as months of the year. With some jQuery, I am able to sort these columns so that the current month number field is first, while the month that just passed is last. I need to run different versions of this script, one for the regular Tabular view when the page first loads, and then again when grid edit loads.

Using the click event for the Grid Edit button makes the script run too many times when going in and out of Grid Edit view. In example, the first script would run on normal view when the report is first loaded. Then, the second script would run on the open Grid Edit button click. Now, when the user clicks the Grid Edit button again to return to normal view, script 2 will run again on-click when it shouldn't. I also cannot have script 2 run only once, because the user may go in and out of grid edit multiple times per session.

Any ideas would be helpful!

[kpcollier]

Haven't figured out anything in regards to only running an event when Grid Edit is opened. However, using some help from the link below, I was able to imitate this with states. 

https://stackoverflow.com/questions/30824766/simple-onclick-every-other-click-javascript-html

[KlisaN137]

Hi @kpcollier,

In order to have some code that runs only when user enter 'grid edit' mode, we can use the following code, that is using the fact that text of the link is different if Grid Edit is opened or closed:

<script>
document.addEventListener('DataPageReady', function(event) {

    const edit = document.querySelectorAll('a[data-cb-name="GridEditButton"]')[1];

    edit.addEventListener('click', e => {
        const xpath = "//a[text()='Grid Edit']";
        const matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        if (matchingElement) {
            // Your code that will execute only when entering grid edit mode
        }
    })
});
</script>

 

[kpcollier]

This is awesome! Thank you!