如何在 ag-grid 中禁用 header 点击排序

Question

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.

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

eg 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?

Answer 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

Answer 2

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