選択できない行で 'チェックマーク'を削除することは可能ですか？

Question

ui-grid v3.1.1を使用しており、特定の行を選択可能な特定の使用例があります。その行の特定のセル私たちは、として、グリッドのHTMLを実施しています

<div id="gridSummary" ui-grid="gridOptions" class="grid-summary" ui-grid-auto-resize ui-grid-selection ui-grid-tree-view ui-grid-pinning> 
     <div class="grid-empty" ng-show="!gridOptions.data.length">No Corresponding Data Found</div> 
</div> 

と私たちは一つの問題を除いて何をしたいんisRowSelectable gridOptionで実験されています：私たちは無効にチェックマークアイコンが非選択に表示したくありません行。行が選択できないときにチェックマークを非表示にする方法はありますか？

おかげ

Answer 1

あなたは非選択行に対してrowHeaderIconを変更することによって、これを達成することができます。

選択行ヘッダーボタンのテンプレートを上書きし、カスタムCSSを追加できます。コントローラーにtemplateCacheを注入し、このようなテンプレートを上書きします。

$templateCache.put('ui-grid/selectionRowHeaderButtons', 
    "<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\">&nbsp;</div>" 
); 

テンプレートでは、コントローラスコープのメソッドを使用して、その行が選択可能かどうかを識別します。

これは役に立ちましたplunkerです。

Answer 2

I'd like to propose this Plunker which has no icon at all for unselectable rows

$templateCache.put('ui-grid/selectionRowHeaderButtons', 
    "<div ng-class=\"{'ui-grid-selection-row-header-buttons': grid.appScope.isSelectable(row), 'ui-grid-icon-ok' : grid.appScope.isSelectable(row), 'ui-grid-row-selected': row.isSelected}\" ng-click=\"selectButtonClick(row, $event)\">&nbsp;</div>" 
);