How to close another groupBox when it is opened (JavaScript)

0
Hi everyone,   I would like to use JavaScript code in HTML snippet to achieve the following about GroupBox, but I would greatly appreciate it if you could provide me with the JavaScript code.   (1) Place a GroupBox in the column header of DataGrid2 (place a text filter in it)  (class of column:.filter) (2)Automatically close other open groupBoxes when a GroupBox in a column is opened. (class:mx-Groupbox) (3)Close the open groupBox even when clicking anywhere on the screen.   Best regards
asked
1 answers
1

 

Hi Yuki,

You can achieve this using JavaScript inside an HTML snippet. The improved JS ensures it works reliably even if the DOM loads later or elements are dynamically rendered.

Here's what the script does:

  • Automatically closes other groupBoxes when one is opened

  • Closes the groupBox if you click outside

  • Doesn't rely on timeout, making it more robust

  • Continues to work even if the DOM updates dynamically

 

document.addEventListener("DOMContentLoaded", function () {
    function setupGroupBoxLogic() {
        const groupBoxes = document.querySelectorAll(".mx-groupbox");

        groupBoxes.forEach(groupBox => {
            const header = groupBox.querySelector(".mx-groupbox-header");

            if (header) {
                header.addEventListener("click", function (e) {
                    // Stop propagation to avoid triggering document click
                    e.stopPropagation();

                    // Toggle current groupbox
                    const isOpen = groupBox.classList.contains("mx-groupbox-open");

                    groupBoxes.forEach(other => {
                        other.classList.remove("mx-groupbox-open");
                        other.classList.add("mx-groupbox-closed");
                    });

                    if (!isOpen) {
                        groupBox.classList.remove("mx-groupbox-closed");
                        groupBox.classList.add("mx-groupbox-open");
                    }
                });
            }
        });

        // Close all groupboxes when clicking outside
        document.addEventListener("click", function () {
            groupBoxes.forEach(groupBox => {
                groupBox.classList.remove("mx-groupbox-open");
                groupBox.classList.add("mx-groupbox-closed");
            });
        });
    }

    // If groupboxes might render later (e.g., due to conditional visibility), observe DOM changes
    const observer = new MutationObserver(setupGroupBoxLogic);
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial setup
    setupGroupBoxLogic();
});

 

 

Thanks 

Guna

answered