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