검도 그리드에서 버튼 모음에 액세스 - 각도 2

궁금하신 점이 있으시면, 격자의 처음 세 줄에있는 버튼에만 "숨김"을 사용할 수 있습니까? 그들을 숨기려고하거나 다른 행의 나머지 버튼을 건드리지 않고 삭제하려고합니다. 아래에서 볼 수 있듯이 모든 항목을 숨기거나 원하는 작업을 수행 할 수는 있지만 그 중 하나만 액세스 할 수는 없습니다. 감사합니다검도 그리드에서 버튼 모음에 액세스 - 각도 2

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

출처

2017-12-22 Math

이 유 버튼이나 행에 intrested입니까? 특정 단추를 숨기거나 특정 행의 단추 만 숨기고 단추 컨텍스트는 무시해야 함을 의미합니다. – maxs87

에 상관없이 어떤 버튼, 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' } 
     ]; 

    }

출처

2017-12-22 14:48:23 maxs87

또한 CSS를 사용할 수 있습니다

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

PLUNKER

출처

2017-12-22 20:49:59 topalkata

검도 그리드에서 버튼 모음에 액세스 - 각도 2

답변

관련 문제