We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' [columns]='columns'>
</ejs-grid>
<ng-template #checkboxedit let-data>
<ejs-checkbox [checked]='data.Discontinued' (change)='change($event, data)'></ejs-checkbox>
</ng-template>
...
@ViewChild('checkboxedit') public chechboxCol: any
...
this.columns = [
{field: 'ProductID', isPrimaryKey: true, width: 120},
{field: 'CategoryName', width: 120},
{field: 'Discontinued', template: this.chechboxCol, width: 120},
{field: 'ProductName', width: 120}
]
}
change(args, rowData){
this.grid.editModule.updateCell(args.event.target.closest('tr').rowIndex, 'Discontinued', args.checked);
}
… |
Hi Neo,
Greetings from Syncfusion.
Query : My requirement is, that check box column enable to change value by only one click. How to do that easily?
We have analyzed your query and we suggest to use the columnTemplate property to achieve your requirement. In the below sample, we have rendered the checkbox component for a checkbox column using columnTemplate property and updated the grid cell values in a single click using updateCell method in the change event of the checkbox. Please refer to the below sample and documentation for your reference,
[.html, .ts]
change(args, rowData){this.grid.editModule.updateCell(args.event.target.closest('tr').rowIndex, 'Discontinued', args.checked);}…
Note: ‘Edit’ item in the toolbar is supported only for the inline and dialog editing modes.
Please get back to us for further assistance.
Regards,Thavasianand S.
Hi Neo,
Greetings from Syncfusion.
Query : My requirement is, that check box column enable to change value by only one click. How to do that easily?
We have analyzed your query and we suggest to use the columnTemplate property to achieve your requirement. In the below sample, we have rendered the checkbox component for a checkbox column using columnTemplate property and updated the grid cell values in a single click using updateCell method in the change event of the checkbox. Please refer to the below sample and documentation for your reference,
[.html, .ts]
change(args, rowData){this.grid.editModule.updateCell(args.event.target.closest('tr').rowIndex, 'Discontinued', args.checked);}…
Note: ‘Edit’ item in the toolbar is supported only for the inline and dialog editing modes.
Please get back to us for further assistance.
Regards,Thavasianand S.
Hi Thavasianand,Thank you very much for your quick response and answer. I have went through your code and changes done to my code. My problem has been solved successfully. But I have small issue. In the checkbox column when we double click on it, it appears the Boolean value itself. My opinion is to avoid the double click edit mode in that particular column. And please advice me to handle disable/enable column by button click event.Highly appreciate your Syncfusion support in this forum.
Hi Shamil,Thanks for the update. We are glad that your requirement has been achieved.Regards,Madhu Sudhanan P
|
<ng-template #checkboxedit let-data>
<ejs-checkbox [checked]='data.Discontinued' [disabled]="disabled" (change)='change($event, data)'></ejs-checkbox>
</ng-template>
export class BatchEditComponent implements OnInit {
....
public disabled = true;
.....
public ngOnInit(): void {
this.data = categoryData;
...
this.toolbar = [{ id: 'EnableEdit', text: 'Edit'}, { id: 'CancelEdit', text: 'Cancel'}];
.....
}
toolbarClick(args){
if (args.item.id === 'EnableEdit') {
this.grid.editSettings ={ allowEditing: true, allowAdding: true, mode: 'Batch' };
this.disabled = false;
}
if (args.item.id === 'CancelEdit') {
this.grid.editSettings ={ allowEditing: false, allowAdding: false, mode: 'Batch' };
this.disabled = true;
}
}
.....
}
|
Hi Shamil,
Thanks for the update.
We have modified the sample to achieve your requirement in which custom edit and delete toolbar items are used to enable/disable edit in grid and also used disabled property of the checkbox to toggle its enable state.
<ng-template #checkboxedit let-data><ejs-checkbox [checked]='data.Discontinued' [disabled]="disabled" (change)='change($event, data)'></ejs-checkbox></ng-template>
export class BatchEditComponent implements OnInit {....public disabled = true;.....public ngOnInit(): void {this.data = categoryData;...this.toolbar = [{ id: 'EnableEdit', text: 'Edit'}, { id: 'CancelEdit', text: 'Cancel'}];.....}toolbarClick(args){if (args.item.id === 'EnableEdit') {this.grid.editSettings ={ allowEditing: true, allowAdding: true, mode: 'Batch' };this.disabled = false;}if (args.item.id === 'CancelEdit') {this.grid.editSettings ={ allowEditing: false, allowAdding: false, mode: 'Batch' };this.disabled = true;}}.....}
Regards,Madhu Sudhanan P
Hi Shamil,
Thanks for the update.
We have toggled the toolbar items as per your requirement using enableItems method of the toolbar module and also canceled batch changes on cancel click using batchCancel method. Please find the below modified sample.
API used
Regards,Madhu Sudhanan P
