Hello Aldrin,

Thank you for posting in our forum.

The igGrid does not raise a special event when the expand/collapse buttons get clicked by the user, and it also prevents another 'click' listeners from being executed, so attaching a separate ‘click’ listener would not work in your scenario.

I would suggest that you handle the ‘mousedown’ event, as it gets raised before ‘click’ and would allow you to execute your custom handling logic. The reason your snippet is not working is because the igGrid re-renders every time some the expand/collapse buttons is clicked. During this re-rendering it destroys the old buttons and creates new ones. This means that even if your clicked handler was not being suppressed by the igGrid, it would work only the first time – after that the html element would be destroyed and the grid would create a new button, without your custom ‘click’ listener attached to it.

In order to workaround this, we would have to attach the handlers every time the grid is re-rendered. My suggestions is to use the rowsRendered event for this purpose. Please note there is also another event, called ‘rendered’, which is not suitable, as it gets raised only once after the initial grid rendering. The rowsRendered handler would allow us to re-attach the ‘mousedown’ handlers to the expand/collapse buttons every time the grid renders its UI. The initialization configuration would look like this:

$("#grid").igGrid({
    dataSource: data,
    responseDataKey: "results",
    primaryKey: "ProductID",
    //some grid options
    rowsRendered: (evt, ui) => {
        $("span.ui-iggrid-expandbuttoncontainer-group-by").on('mousedown', () => {
            console.log('Mousedown on expand/collapse button')
        })
    },
    columns: [   
        //some columns
    ],
    features: [
        {
            name: "GroupBy"
        }
    ]
})

There is another thing to note here: I would suggest that you avoid using “alert()”, because it not only stops the code execution, but also changes the behavior of all asynchronous code that runs in the meantime. That means if you have something in a ‘setTimeout’, it might not work correctly if you execute ‘alert()’ before it. Trying to run the above snippet with an alert instead of console.log prevents the grid from updating the UI (at least on my side), and from an end-user perspective it looks like the buttons have stopped working. In case you use alert for debugging purposes, a simple console.log would be enough to notify you your code has been executed. If you use alert for notifying the user, then hiding and showing a span or div would have the same effect, without blocking the code from running.

If you really need to use alert(), try wrapping it in a setTimeout so that it runs after the grid has updated the UI. I had to use a delay of at least 100ms on my machine in order to avoid blocking the grid’s rendering. The handler would look like this:

rowsRendered: (evt, ui) => {
    $("span.ui-iggrid-expandbuttoncontainer-group-by").on('mousedown', () => {
        setTimeout(() => { alert("Mousedown on expand/collapse") }, 100)
    })
}

Please note that this is a custom solution and we cannot guarantee it would work for every possible scenario.