CODEWITHSUNDEEP
javascriptangularkendo-uikendo-grid
Pravin
Pravin

Reputation: 39

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

Kendo Ui for i like to enable textbox when check box is cheked only. below code. I have tried onselection of checkbox but it changing to all rows. need to change only checked row

   <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){
            
              }

In place of product name and units.I have textboxes

Upvotes: 1

Views: 1239

Answers (1)

Z. Bagley
Z. Bagley

Reputation: 9260

You will need to create a function to track the selected rows:

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

Upvotes: 1

Related Questions