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

Batch edit and modal window

Thread ID:

Created:

Updated:

Platform:

Replies:

143171 Mar 7,2019 11:26 AM UTC Apr 3,2019 12:45 PM UTC Angular - EJ 2 3
loading
Tags: Grid
Jose Luis Garcia
Asked On March 7, 2019 11:26 AM UTC

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 [Syncfusion]
Replied On March 11, 2019 08:45 AM UTC

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(); 
  } 

  
Help documentation :  



Regards, 
Thavasianand S. 


Jose Luis Garcia
Replied On April 2, 2019 02:41 PM UTC

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 [Syncfusion]
Replied On April 3, 2019 12:45 PM UTC

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(); 
} 



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

Regards, 
Thavasianand S. 


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

;