ヘッダーのクリックを無効にする方法ag-gridで並べ替え

Question

ag-Grid sortingは、opt.enablesortingをtrueに設定すると、ヘッダーのクリックとソートアイコンの表示とグリッド内での並べ替えが可能になります。

ただし、ヘッダーのクリックではなくポップアップmdoelウィンドウでapi.setSortModelを手動で設定することをお勧めします。だから、ヘッダーのクリックをいくつかの方法で無効にしたい。私はそれを修正するいくつかの方法を試みたが、それらのいずれかが働いた。

opt.enablesortingをfalseに設定し、ヘッダーのクリックソートを無効にしました。しかし、その間に、api.setSortModelもうまくいきませんでした。

カスタムのheaderCellTemplateにheaderCellRendererを使用しましたが、失敗しました。 ヘッダーをクリックすると、上向き矢印が表示されたためです。

私はそれを修正するための方法はありますか？

Answer 1

このようなイベントは列ヘッダーのクリックにはないので、それを処理できます。しかし、私は列ヘッダーテンプレートデフォルトのテンプレートを使用して、1つのハックを発見された：

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

が

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

この意志としてそれを作るために第三のdivからID =「agHeaderCellLabel」をしたい場合は、同じカルコゲノフルバレン骨格を維持するが、削除クリックイベントのバインディングを防止する