Kendo UI 如果未选中复选框，Angular 的网格禁用文本框

Question

Kendo Ui 因为我喜欢仅在选中复选框时启用文本框。下面的代码。我试过选择复选框，但它更改为所有行。只需要更改选中的行

   <kendo-grid [data]="gridView" [height]="500" [selectable]="true" (selectionChange)="selectionChange($event)">
            <kendo-grid-checkbox-column showSelectAll="true"></kendo-grid-checkbox-column>
            <kendo-grid-column field="domainName" title="domainName" [width]="300"></kendo-grid-column>



            <kendo-grid-column title="subdomain" field="subdomain">
              <ng-template kendoGridCellTemplate let-column="column" let-dataItem="dataItem">
                <kendo-textbox kendoTextBoxLocalizedMessages [(ngModel)]="dataItem.subdomain"></kendo-textbox>
              </ng-template>
            </kendo-grid-column>
--------------html-------------
      public selectionChange(e) {
            if(e.selectedRows.length>0){
           }
            if(e.deselectedRows.length>0){
            
              }

Answer 1

您需要创建一个函数来跟踪所选行：

import { Component } from '@angular/core';
import { products } from './products';
import { GridDataResult, PageChangeEvent, SelectAllCheckboxState } from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-app',
    template: `
        {{isBoxEnabled}}
        <kendo-grid
            [data]="gridView"
            [pageSize]="pageSize"
            [skip]="skip"
            [pageable]="true"
            (pageChange)="pageChange($event)"
            [height]="500"
            [selectable]="{enabled: true, checkboxOnly: true }"
            (selectionChange)="selectionChange($event)"
            kendoGridSelectBy="ProductID">
            <kendo-grid-checkbox-column [width]="80">
                <ng-template kendoGridHeaderTemplate>
                    <input class="k-checkbox" id="selectAllCheckboxId" kendoGridSelectAllCheckbox >
                    <label class="k-checkbox-label" for="selectAllCheckboxId">Text</label>
                </ng-template>
            </kendo-grid-checkbox-column>
            <kendo-grid-column field="ProductName" title="Product Name" [width]="300"></kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="Units In Stock"></kendo-grid-column>
            <kendo-grid-column field="UnitsOnOrder" title="Units On Order"></kendo-grid-column>
            <kendo-grid-column field="ReorderLevel" title="Reorder Level"></kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    public gridView: GridDataResult;
    public items: any[] = products;
    public mySelection: number[] = [];
    public selectAllState: SelectAllCheckboxState = 'unchecked';
    public pageSize = 10;
    public skip = 0;

    public isBoxEnabled = false;

    constructor() {
        this.loadItems();
    }


    public pageChange(event: PageChangeEvent): void {
        this.skip = event.skip;
        this.loadItems();
    }

    private loadItems(): void {
        this.gridView = {
            data: this.items.slice(this.skip, this.skip + this.pageSize),
            total: this.items.length
        };
    }
    
    public selectionChange(e) {
      const selectedRowIndices = e.selectedRows.map(row => row.index)
      const deselectedRowIndices = e.deselectedRows.map(row => row.index)
      this.mySelection = this.mySelection.concat(selectedRowIndices)
      this.mySelection = this.mySelection.filter(selection => !deselectedRowIndices.includes(selection))
      this.isBoxEnabled = this.mySelection.length > 0
    }
}

StackBlitz：https://stackblitz.com/edit/angular-ajpix8-gj9vdu?file=app/app.component.ts

Kendo UI 如果未选中复选框，Angular 的网格禁用文本框

Kendo UI Grid for Angular disable a Textbox if the Checkbox is not checked

javascript

kendo-ui

kendo-grid

angular