Question

我想知道，是否有可能使用＆＃34;隐藏＆＃34;仅适用于网格前三行的按钮？我试图隐藏它们或删除而不触及其他行中的其他按钮。正如你在下面看到的，有可能隐藏所有这些，或做任何你想做的事，但我找不到只能访问其中一个。感谢

 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

假设你只需要在前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>

成分</ P>

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

访问kendo网格中的按钮集合 - 角度2

2 个答案: