剣道uiグリッド角2で行ダブルクリックイベントを実行するには？

Question

角度2の剣道UIグリッドのセルテンプレート<span>タグに元のセル値を表示する方法。

コード

<ng-container ngFor="let col of grid.ColModel"> 
    <kendo-grid-column [title]="col.Label" [field]="col.Name" [locked]="col.Locked" width="250px" *ngIf="hiddenColumns.indexOf(col.Name) === -1" > 
     <template kendoCellTemplate let-dataItem let-rowIndex="rowIndex" > 
     <span (dblclick)="open(rowIndex)">**{{dataItem}}** </span> 
     </template> 
    </kendo-grid-column> 
</ng-container> 

Answer 1

あなたダブルクリックハンドラの最初の引数は、（あなたがテンプレートに$eventとしてアクセスすることができます）をダブルクリックし、イベントをする必要があります。最初にそれを渡し、rowIndex秒を渡す必要があります。

さらに、を使用していて、内容が埋め込まれたセルの内側にあるため、多くのclickイベントが不足している可能性があります。あなたのセル全体をクリックターゲットにすることをお勧めします。たとえば、divに変更し、含まれている詰め物を取り除くことをお勧めします。td

だからあなたの細胞のテンプレートは次のようになります。

<kendo-grid-column field="MyField"> 
    <template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex"> 
     <div class="innerCell" (dblclick)="onRowDoubleClick($event, rowIndex)"> 
      {{dataItem.MyField}} 
     </div> 
    </template> 
</kendo-grid-column> 

そして、あなたの機能：

onRowDoubleClick(evt, rowIndex) { 
    alert('You clicked row ' + rowIndex + '!'); 
} 

そして、あなたのスタイリング：

td { padding: 0 !important; } 
td > .innerCell { padding: 7px; cursor: pointer; } 

例：Plunker

Answer 2

Melanieによって提供された例は過去に働いていたかもしれませんが、Angular 2/4 Gridでは機能しません（plunkerをクリックすると読み込まれません）。

同じ問題が発生したため、多くのデバッグが必要です。

次のようにシンプルなグリッドのソリューションだった

：

<kendo-grid #myGrid [selectable]="true" (dblclick)="dblClickEvent(myGrid, $event)"> 
<kendo-grid-column field="User" title="User" width="100"> 
        </kendo-grid-column> 
</kendo-grid> 

あなた.TSファイルでは、次のようにイベントを実装：

 dblClickEvent(grid, event) { 
     // debugger; 
     console.log('the selected row Index is '+ event.path[1].rowIndex); 
     //use the following line if you want to get the clicked cell content: 
console.log('clicked cell content'+ event.path[0].textContent); 

} 

これはから、あなたの選択された行のインデックスを与えるだろうあなたはできます

希望これは役立ちます。