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. Image for the cookie policy date
close icon

Grid batch edit mode customization

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.

5 Replies

MS Madhu Sudhanan P Syncfusion Team February 26, 2019 12:05 PM UTC

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; 
    } 
  } 
..... 
} 



Regards, 
Madhu Sudhanan P  



NE Neo replied to Madhu Sudhanan P February 27, 2019 04:04 AM UTC

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; 
    } 
  } 
..... 
} 



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.


MS Madhu Sudhanan P Syncfusion Team February 27, 2019 04:07 AM UTC

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 



NE Neo replied to Madhu Sudhanan P February 27, 2019 04:16 AM UTC

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 


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


MS Madhu Sudhanan P Syncfusion Team February 27, 2019 09:39 AM UTC

Hi Shamil, 
  
Thanks for the update. 
  
Regards, 
Madhu Sudhanan P 


Loader.
Live Chat Icon For mobile
Up arrow icon