Grid batch edit mode customization

[Neo]

Hi Team,

https://angular-qbmvcc.stackblitz.io/  This is the current implementation of the Gird.

I have small things to done in this grid to complete my requirement.

• I want to add "Edit" toolbar button. (I know in Batch edit, it doesn't support. But I want to add customized button)
• Initial load of the Grid, batch edit should be disabled. (Checkbox column and cell double click edit mode also disabled/Non-editable)
• When pressing on customized "Edit" button, Grid should be enable checkbox column and enable double click cell edit mode. If user clicked on "Cancel" button, the grid should comes to normal state. (Like initial load)

Note: Kindly request the answer include in Stackblitz.

Thank you.

[Madhu Sudhanan P]

Hi Shamil, 

Thanks for contacting Syncfusion support. 

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; 

    } 

  } 

..... 

} 

https://stackblitz.com/edit/custom-edit?file=batch-editing.html 

Regards, 

Madhu Sudhanan P  

[Neo]

Hi Shamil, 

Thanks for contacting Syncfusion support. 

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; 

    } 

  } 

..... 

} 

https://stackblitz.com/edit/custom-edit?file=batch-editing.html 

Regards, 

Madhu Sudhanan P  

Hi Madhu,

One more thing to do in that grid. I want to perform this customized tool bar as default toolbar. That means, when we press on the "Edit" button it should be disabled & "Cancel" button should be enabled. When "Cancel" button pressed, it should back to normal and cancel button operation should be perform as the default one. (Grid changes should rollback)

Thank you.

[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. 

https://stackblitz.com/edit/custom-edit?file=batch-editing.html 

API used 

https://ej2.syncfusion.com/documentation/api/grid/edit/#batchcancel 

https://ej2.syncfusion.com/documentation/api/grid/#databound 

Regards, 

Madhu Sudhanan P 

[Neo]

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. 

https://stackblitz.com/edit/custom-edit?file=batch-editing.html 

API used 

https://ej2.syncfusion.com/documentation/api/grid/edit/#batchcancel 

https://ej2.syncfusion.com/documentation/api/grid/#databound 

Regards, 

Madhu Sudhanan P 

It's working. Your support is awesome. Thank you very much!

[Madhu Sudhanan P]

Hi Shamil, 

  

Thanks for the update. 

  

Regards, 

Madhu Sudhanan P