行選択を有効にして、角度UIグリッドでテキスト選択を有効にする方法

Question

私はui-grid v3.1.1を使用しており、rowSelectionを有効にしています。行選択を有効にすると、行からテキストを選択（クリック・ホールド・ドラッグ）することができなくなります。

チュートリアル（ページの2番目のグリッド）のexampleで同じ動作が発生しました。

rowSelectionが有効な場合でも、ユーザーがテキストを選択できるようにするいくつかの回避策があるかどうかを知ることは素晴らしいことです。

Hereはチュートリアルの例へのplunkrリンクです。

$scope.gridOptions = { 
    enableRowSelection: true, 
    enableRowHeaderSelection: false 
}; 

Answer 1

previous SO answer by @Aman Mahajanは修正を提供しています：両方enableRowSelectionとenableFullRowSelectionが有効になっているとき

ui-grid-disable-selectionクラスがグリッドに追加された（ui-grid v3.1.1 source in selection.js〜ライン903を確認することができます）。したがって、特定のクラスをグリッドに追加することで、CSSクラスをオーバーライドすることができます（例：ui-grid-selectable）。

<div ui-grid="gridOptions" ui-grid-selection class="grid ui-grid-selectable"></div> 

そして、あなたのCSSで

：

.ui-grid-selectable .ui-grid-disable-selection { 
    -webkit-touch-callout: default; 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    user-select: text; 
    cursor:auto; 
} 

ここではデフォルトの動作をオーバーライドするthe forked plunker with the added CSS classです。

Answer 2

、あなたがそうのようなあなたのhtmlグリッドタグにui-grid-editを追加することができ、私は間違いなくBennettAdams答えの方が好き、しかし、念のために誰もがそれを行うには別の方法を必要とします：

<div ui-grid="gridOptions" ui-grid-selection ui-grid-edit></div> 

注：これもでui.grid.editを定義する必要がありそのようなアプリの定義：

var app = angular.module('myGridApp', ['ui.grid', 'ui.grid.edit']) 

短所：

• 賛否

（それが設定されていない場合、変更は保存されませんが）テキスト

に取得するには、セルは、ユーザーがセルの値を編集することができますダブルクリックする必要があります：

• ダブルクリックすると、セルは自動的にすべてのテキスト
• より読みやすいコード（ALTHを強調しますなぜなら、変更が持続されないとセルが編集可能である理由は明らかではないかもしれないからです）。