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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid batch edit mode customization

Thread ID:

Created:

Updated:

Platform:

Replies:

142927 Feb 26,2019 06:37 AM UTC Feb 27,2019 09:39 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Neo
Asked On February 26, 2019 06:37 AM UTC

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 [Syncfusion]
Replied On 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  


Neo
Replied On 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.

Madhu Sudhanan P [Syncfusion]
Replied On 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 


Neo
Replied On 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!

Madhu Sudhanan P [Syncfusion]
Replied On February 27, 2019 09:39 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;