how to disable header clicks sort in ag-grid

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.

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 ?

sorting should be off by default, If you have enableSorting: true somewhere in your gridOptions, then remove it. - Other than this we would need you to include some code for us to help you debug, better yet, put your code in a jsfiddle or something similar. — Jarod Moser

mani mani · Accepted Answer · 2016-10-13T08:36:16

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

how to disable header clicks sort in ag-grid

1 Answers