剣道グリッドのボタンコレクションへのアクセス - 角2

Question

グリッドの最初の3つの行のボタンにのみ「隠し」を使用することは可能でしょうか？私はそれらを隠そうとしたり、他の行の残りのボタンに触れることなく削除しようとしています。以下に示すように、それらのすべてを隠す可能性もあれば、何でもしたいことがありますが、そのうちの1つのみにアクセスすることはできません。おかげ

template: ` 
     <kendo-grid 
      [data]="view | async" 
      [height]="533" 
      [pageSize]="gridState.take" [skip]="gridState.skip" [sort]="gridState.sort" 
      [pageable]="true" [sortable]="true" 
      (dataStateChange)="onStateChange($event)" 
      (edit)="editHandler($event)" (cancel)="cancelHandler($event)" 
      (save)="saveHandler($event)" (remove)="removeHandler($event)" 
      (add)="addHandler($event)" 
     > 
     <ng-template kendoGridToolbarTemplate> 
      <button kendoGridAddCommand>Add new</button> 
     </ng-template> 
     <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column> 
     <kendo-grid-column field="UnitPrice" editor="numeric" title="Price"></kendo-grid-column> 
     <kendo-grid-column field="Discontinued" editor="boolean" title="Discontinued"></kendo-grid-column> 
     <kendo-grid-column field="UnitsInStock" editor="numeric" title="Units In Stock"></kendo-grid-column> 
     <kendo-grid-command-column title="command" width="220"> 
      <ng-template kendoGridCellTemplate let-isNew="isNew"> 
       <button kendoGridEditCommand class="k-primary">Edit</button> 
       <button kendoGridRemoveCommand>Remove</button> 
       <button kendoGridSaveCommand [disabled]="formGroup?.invalid">{{ isNew ? 'Add' : 'Update' }}</button> 
       <button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button> 
      </ng-template> 
     </kendo-grid-command-column> 
     </kendo-grid> 
    ` 

Answer 1

関係なく何であるかのボタン、uは唯一の最初の3行のボタンを非表示にする必要があると仮定していない、あなたが必要な行を見つけるためにrowIndexプロパティを使用することができます。

<kendo-grid [data]="testData" [height]="410"> 
    <kendo-grid-column field="title" title="title" width="190"> 
    </kendo-grid-column> 
    <kendo-grid-column title="buttons" width="120"> 
     <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex"> 
      <div *ngIf="rowIndex >=0 && rowIndex < 3 && topButtonsDisplayed"> 
       <button>{{ rowIndex}}</button> 
      </div> 
      <div *ngIf="rowIndex >= 3"> 
       <button>{{ rowIndex}}</button> 
      </div> 
     </ng-template> 
    </kendo-grid-column> 
</kendo-grid> 

<button (click)="toggleTopButtons()">toggle top 3 buttons</button> 

コンポーネント

import { Component } from '@angular/core'; 

    @Component({ 
     selector: 'app-grid', 
     templateUrl: './grid.component.html' 
    }) 
    export class GrifComponent { 

     public topButtonsDisplayed: boolean = true; 

     public toggleTopButtons() { 
      this.topButtonsDisplayed = !this.topButtonsDisplayed; 
     } 

      public testData: Array<any> = [ 
      { title: '1' }, 
      { title: '2' }, 
      { title: '3' }, 
      { title: '4' }, 
      { title: '5' }, 
      { title: '6' } 
     ]; 

    } 

Answer 2

また、CSSを使用することができます。

>>> .k-grid tr:not(:nth-child(n + 4)) .k-button { 
     display: none; 
    } 

PLUNKER