Batch edit and modal window

[Jose Luis Garcia]

Hello,

I would like to know if it's possible edit a grid row in a custom modal window, for example with double click in the row, but save updates like batch update.

I think the process could be something like:

1) press edit or double click to edit grid row

2) open custom modal window with data from grid 

3) press save button in window and return edited data and update grid row

4) ... edit other rows ...

5) press grid Update button and complete batch update

The reason of this it's because I need to edit only a checkbox cell in the row, and if I check (true) the checkbox I need to edit also a date cell and the value of this date cell is required. In case the check is removed (false) I need to clear value of cell date. I need to do this operation in several rows before save all together. Only need edit, not add and not remove.

Thank you very much

Jose

[Thavasianand Sankaranarayanan]

Hi Jose, 

Greeting from Syncfusion. 

We have analyzed your requirement and created a sample based on that. In the below sample, we have cancel the default editing in cellEdit event and show the custom dialog in Grid. Based on the dialog input value (false) we have changed the row value(current date) in Grid using updateCell method. 

<ejs-dialog #template [height]='height' [visible]='false' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon' [content]='alertContent'  [header]='alertHeader' isModel='true' [width]='width'> 

  <ng-template #footerTemplate>   

      <input id="inVal" class="e-input" type="text" placeholder="Enter Status"/> 

      <button id="sendButton" (click)="status($event)" class="e-control e-btn e-primary sendButton" data-ripple="true">Send</button> 

  </ng-template> 

</ejs-dialog> 

  <ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' (cellEdit)='cellEdit($event)' [toolbar]='toolbar'> 

      <e-columns> 

          <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

          . . . . .  

          <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' editType='datepickeredit' textAlign='Right'></e-column> 

           <e-column field='Status' headerText='Status' width='150' displayAsCheckBox='true' ></e-column> 

      </e-columns> 

  </ejs-grid> 

cellEdit(args){ 

    this.rowindex = args.row.rowIndex; 

    args.cancel = true; 

    this.Dialog.element.getElementsByTagName('input')[0].value = args.rowData['Status'] 

    this.Dialog.show(); 

  } 

 

  status(args){ 

    // you can update value as per your requirement. 

    if(this.Dialog.element.getElementsByTagName('input')[0].value =="false"){ 

      this.grid.editModule.updateCell(this.rowindex, "Status", false) 

      this.grid.editModule.updateCell(this.rowindex, "OrderDate", new Date()) 

    } 

     this.Dialog.hide(); 

  } 

Sample : https://stackblitz.com/edit/angular-bwdv7y-7qeyrg?file=batch-editing.component.ts  

  

Help documentation :  

https://ej2.syncfusion.com/angular/documentation/api/grid/#celledit  

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

Regards, 

Thavasianand S. 

[Jose Luis Garcia]

Hi Thavasianand,

I'm sorry but I've not been able to reproduce your sample.

"this.Dialog" is always undefined.

In other tests I've tried to call a custom function from cellEdit event, but always received the "typerror xxxx is not a function."

I think may be related to "this context", but I'm not sure.

Regards

Jose

[Thavasianand Sankaranarayanan]

Hi Jose, 

Thanks for your update. 

Query: "this.Dialog" is always undefined. 

 

Could you please check and ensure whether did you declare the Dialog component like below in your application. By default, this contains the current component instances so its necessary to declare it in the component to access it. 

import { Component, OnInit, ViewChild } from '@angular/core'; 

import { DialogComponent } from '@syncfusion/ej2-angular-popups'; 

 

export class BatchEditComponent implements OnInit { 

    @ViewChild('dialog') 

    public Dialog: DialogComponent; 

    @ViewChild('batchgrid') 

 

    cellEdit(args){ 

      this.rowindex = args.row.rowIndex; 

      args.cancel = true; 

      this.Dialog.element.getElementsByTagName('input')[0].value = args.rowData['Status'] 

      this.Dialog.show(); 

    } 

} 

Query: in other tests I've tried to call a custom function from cellEdit event, but always received the "typerror xxxx is not a function." 

 

We have checked with our end and its working fine at our sample. Kindly refer the below sample for more information also share whether you are using default or arrow function in your application. 

cellEdit(args: any){ 

  this.dialogcustomization(args) 

} 

 

dialogcustomization(args: any){ 

  this.rowindex = args.row.rowIndex; 

  args.cancel = true; 

  this.Dialog.element.getElementsByTagName('input')[0].value = args.rowData['Status'] 

  this.Dialog.show(); 

} 

Sample :  https://stackblitz.com/edit/angular-bwdv7y-7qeyrg?file=batch-editing.component.ts 

If you still faced the problem then share the code example or sample to validated further. 

Regards, 

Thavasianand S.