Dear Reader,
This is a very important topic because developers are often confused about how to manage checkbox checked and unchecked values, and how to update multiple records with one click. First, I will explain how to set up the settings in the child component, which you can then use across multiple components. Here is my Child-Grid
<kendo-grid
[data]="gridDataResult"
(dataStateChange)="onDataStateChange($event)"
(edit)="onEdit($event)"
[selectable]="{ mode: 'multiple', checkboxOnly: true }"
kendoGridSelectBy="id"
[(selectedKeys)]="selectedKeys"
(selectionChange)="onSelectionChange($event)"
(selectedKeysChange)="onSelectedKeysChange()"
>
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand *ngIf="gridSetting.enableAdd">{{ gridSetting.addCommandTxt }}</button>
<button type="button" *ngIf="gridSetting.enableExport" kendoGridExcelCommand>Export to Excel</button>
<button kendoButton *ngIf="gridSetting.enableSave" (click)="onUpdateSelected()">Submit Selected Entry</button>
</ng-template>
<!-- Move the checkbox column to the first position -->
<kendo-grid-checkbox-column *ngIf="showCheckbox" [showSelectAll]="true" [width]="50"></kendo-grid-checkbox-column>
<kendo-grid-command-column
[title]="gridSetting.commandColTxt"
[width]="gridSetting.commandColWidth"
*ngIf="gridSetting.enableEdit || gridSetting.enableRemove || gridSetting.enableDeny"
>
<ng-template kendoGridCellTemplate let-dataItem>
<button kendoGridEditCommand [primary]="true" look="flat" *ngIf="gridSetting.enableEdit">
<span class="k-icon k-i-edit" [title]="gridSetting.editCommandTxt">{{gridSetting.editCommandTxt}}</span>
</button>
<button kendoGridEditCommand [primary]="true" look="flat" *ngIf="gridSetting.enableDeny">
<span class="k-icon k-i-edit" [title]="gridSetting.denyCommandTxt">{{gridSetting.denyCommandTxt}}</span>
</button>
<button
kendoGridRemoveCommand
*ngIf="gridSetting.enableRemove && (dataItem[gridSetting.activeFlagField] || gridSetting.activeFlagField === undefined)"
>
{{ gridSetting.removeCommandTxt }}
</button>
</ng-template>
</kendo-grid-command-column>
<kendo-grid-column
*ngFor="let column of columns"
[hidden]="column.type === ColumnTypeEnum.Hidden"
[field]="column.displayField === undefined ? column.field : column.displayField"
[title]="column.title"
[format]="column.format"
[filter]="column.filterType"
[width]="column.width"
>
<ng-template kendoGridCellTemplate let-dataItem let-data *ngIf="column.type === ColumnTypeEnum.Checkbox">
<input
[state]="selectAllState"
kendoGridSelectAllCheckbox
(selectAllChanges)="onSelectAllChanges($event)"
type="checkbox"
kendoCheckBox
disabled
[attr.checked]="
dataItem[column.displayField === undefined ? column.field.toString() : column.displayField.toString()] ? 'checked' : null
"
/>
</ng-template>
</kendo-grid-column>
<kendo-grid-excel [fileName]="gridSetting.exportFileName"></kendo-grid-excel>
</kendo-grid>
My Ts file
@Component({
selector: 'app-shared-common-grid',
templateUrl: './common-grid.component.html',
styleUrls: ['./common-grid.component.scss']
})
export class CommonGridComponent extends BaseGridComponent implements OnInit {
@Input() showCheckbox: boolean = true;
@Input() set gridDataSource$(input$: Observable<GridDataResult>) {
if (input$) {
this.gridData$ = input$;
this.refreshGridData();
}
}
@Input() private saveSuccess: EventEmitter<any>;
@Output() selectionChange: EventEmitter<SelectionEvent> = new EventEmitter<SelectionEvent>();
@Output() selectAllChanges: EventEmitter<SelectAllCheckboxState> = new EventEmitter<SelectAllCheckboxState>();
@Output() selectedKeysChange: EventEmitter<void> = new EventEmitter<void>();
@Output() loadingStateChange: EventEmitter<boolean> = new EventEmitter<boolean>();
loading: false;
selectedRecords: Array<any> = [];
public selectAllState: SelectAllCheckboxState = "unchecked";
public selectedKeys: Array<number> = [];
constructor() {
super();
}
onSelectionChange(e: SelectionEvent): void {
this.selectionChange.emit(e);
}
onSelectAllChanges(checkedState: SelectAllCheckboxState): void {
this.selectAllChanges.emit(checkedState);
}
onSelectedKeysChange(): void {
this.selectedKeysChange.emit();
}
}
Now My Parent code is as below :
<app-shared-common-grid
[columns]="columns"
[gridLoading]="loading"
[gridSubmitting]="submitting"
[gridDataSource$]="gridDataSource$"
[gridSetting]="gridSetting"
[saveSuccess]="saveSuccess"
[showCheckbox]="true"
(updateSelectedRecords)="onUpdateSelectedRecords($event)"
(editClicked)="onEditClicked($event)"
(selectionChange)="handleSelectionChange($event)"
(selectAllChanges)="handleSelectAllChanges($event)"
(selectedKeysChange)="handleSelectedKeysChange()"
></app-shared-common-grid>
My Parent TS
@Component({
selector: 'app-sample-submit-list',
templateUrl: './submit-list.component.html'
})
export class SubmitListComponent implements OnInit {
form: FormGroup;
dropdownLoading = true;
productControl: FormControl;
loading = false;
submitting: boolean;
columns: ColumnSetting[];
gridSetting: GridSetting;
gridDataSource$: Observable<GridDataResult>;
private gridDataSubject = new BehaviorSubject<GridDataResult>({ data: [], total: 0 });
saveSuccess: EventEmitter<any> = new EventEmitter();
hasData$: Observable<boolean>;
ApproverDataSource$: Observable<Approver[]>;
selectedKeys: any[] = [];
selectedRecords: any[] = [];
public mySelection: number[] = [];
selectAllState: SelectAllCheckboxState = "unchecked";
constructor(
) {
}
ngOnInit(): void {
}
handleSelectionChange(event: SelectionEvent) {
// Handle selection change event
console.log('Parent component selection change:', event);
if (event.selectedRows && event.selectedRows.length > 0) {
event.selectedRows.forEach(row => {
if (!this.selectedRecords.some(record => record.id === row.dataItem.id)) {
this.selectedRecords.push(row.dataItem);
}
});
}
if (event.deselectedRows && event.deselectedRows.length > 0) {
const deselectedIds = event.deselectedRows.map(row => row.dataItem.id);
this.selectedRecords = this.selectedRecords.filter(record => !deselectedIds.includes(record.id));
}
this.selectedKeys = this.selectedRecords.map(record => record.id);
}
handleSelectAllChanges(checkedState: SelectAllCheckboxState) {
// Handle select all changes event
console.log('Parent component select all changes:', checkedState);
if (checkedState === 'checked') {
this.gridDataSource$.subscribe(data => {
this.selectedRecords = data.data.filter(record => record.isChecked);
this.selectedKeys = this.selectedRecords.map(record => record.id);
});
} else {
this.selectedRecords = [];
this.selectedKeys = [];
}
}
handleSelectedKeysChange() {
// Handle selected keys change event
console.log('Parent component selected keys change');
const len = this.selectedKeys.length;
this.gridDataSource$.subscribe(data => {
const gridDataLength = data.data.length;
if (len === 0) {
this.selectAllState = 'unchecked';
} else if (len > 0 && len < gridDataLength) {
this.selectAllState = 'indeterminate';
} else {
this.selectAllState = 'checked';
}
});
}
handleLoadingStateChange(isLoading: boolean) {
// Handle loading state change
this.loading = isLoading;
}
onUpdateSelectedRecords(selectedRecords: any[]): void {
if (this.selectedKeys.length > 0) {
this.submitting = true; // Activate the loader
this.serviceforUpdate.updateRecords(this.selectedKeys).subscribe(
res => {
console.log('Selected records updated successfully.');
this.notifyResult(res);
},
error => {
console.error('Error updating records:', error);
this.notifyResult({ viewStatus: ViewStatus.Failure, message: 'Error updating records' });
this.submitting = false;
}
);
} else {
console.log('No records selected.');
}
}
}
Here is the full code. I hope it helps you. Thank you, Guru (Mr. Surendra), for explaining all the concepts.
