'how to disable header clicks sort in ag-grid

As the ag-Grid sorting, setting the opt.enablesorting true, this will allow header clicks and show sort icons and sort within the grid.

However, I prefer to set api.setSortModel manually in a popup mdoel window rather than header clicks. So I want header clicks was disabled by some ways. I have tried some ways to fix it, but any of them worked.

e.g. I setted the opt.enablesorting false, header clicks sort was be disabled. But meantime, api.setSortModel didn't work as well.

e.g. I used headerCellRenderer to custom headerCellTemplate, but also failed. Because the up down arrow was shown up when I click the header.

Are there any ways to help me to fix it ?

Solution 1:^[1]

There is no as such event for column header click, so that you can handle that. But I Found one hack by using column header template default template is:

<div class="ag-header-cell">
    <div id="agResizeBar" class="ag-header-cell-resize"></div>
    <span id="agMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
    <div id="agHeaderCellLabel" class="ag-header-cell-label">
        <span id="agSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>
        <span id="agSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>
        <span id="agNoSort" class="ag-header-icon ag-sort-none-icon"></span>
        <span id="agFilter" class="ag-header-icon ag-filter-icon"></span>
        <span id="agText" class="ag-header-cell-text"></span>
    </div>
</div>

keep same struture if you want but remove id="agHeaderCellLabel" from third div to make it as

<div class="ag-header-cell">
    <div id="agResizeBar" class="ag-header-cell-resize"></div>
    <span id="agMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
    <div class="ag-header-cell-label">
        <span id="agSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>
        <span id="agSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>
        <span id="agNoSort" class="ag-header-icon ag-sort-none-icon"></span>
        <span id="agFilter" class="ag-header-icon ag-filter-icon"></span>
        <span id="agText" class="ag-header-cell-text"></span>
    </div>
</div>

this will prevent the click event binding

Solution 2:^[2]

in the newer version (Version 27.2.0 is the one i'm using), remove ref="eLabel" in div

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mani
Solution 2	no_doubt

'how to disable header clicks sort in ag-grid

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]