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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

EJ2 Angular Grid Batch Edit with Drag and Drop option

Thread ID:

Created:

Updated:

Platform:

Replies:

143876 Apr 9,2019 03:47 AM UTC Apr 24,2019 09:05 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Kishore Bandela
Asked On April 9, 2019 03:47 AM UTC

Hi There, 

We have the same issue mentioned in below on Angular Batch Grid too. Do we have a fix for it? If not can you provide how we can fix it temporarily in Angular grids with batch editing? 

Basically, the issue is on batch edit grid with drag and drop. When I edit a cell and change its value, it is replacing the cell value with its prev cell value.


Thanks
Kishore. 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 10, 2019 11:43 AM UTC

Hi Kishore, 

Greetings from Syncfusion support. 

As per your suggestion, we have created a sample and resolve batch editing problem in Grid. Please check the below code example and sample for more information. 

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true'  [allowRowDragAndDrop]='true' [pageSettings]='pageSettings' (cellSave)="cellSave($event)" [editSettings]='editSettings' [toolbar]='toolbar'> 
    <e-columns> 
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 
    </e-columns> 
</ejs-grid> 


cellSave(args){ 
   let tr = parentsUntil(args.cell, "e-row"); 
    let cell = this.Grid.getRowObjectFromUID(tr.getAttribute('data-uid')).cells; 
    if(this.Grid.columns.length < cell.length){ 
          this.Grid.getRowObjectFromUID(tr.getAttribute('data-uid')).cells = this.Grid.getRowObjectFromUID(tr.getAttribute('data-uid')).cells.slice(1); 
    } 
  } 



We have already considered “Batch edit misbehaves when enable allow drag and drop in Grid” as a bug and logged a defect report for the same and the fix for issue will be available on 17th April 2019. You can now track the current status of your request through this link https://www.syncfusion.com/feedback/4846/batch-edit-misbehaves-when-allowdraganddrop-enabled

Regards, 
Thavasianand S. 


Kishore Bandela
Replied On April 19, 2019 05:08 AM UTC

Hi Kishore, 

Greetings from Syncfusion support. 

As per your suggestion, we have created a sample and resolve batch editing problem in Grid. Please check the below code example and sample for more information. 

<ejs-grid #batchgrid id='Batchgrid' [dataSource]='data' allowPaging='true'  [allowRowDragAndDrop]='true' [pageSettings]='pageSettings' (cellSave)="cellSave($event)" [editSettings]='editSettings' [toolbar]='toolbar'> 
    <e-columns> 
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 
    </e-columns> 
</ejs-grid> 


cellSave(args){ 
   let tr = parentsUntil(args.cell, "e-row"); 
    let cell = this.Grid.getRowObjectFromUID(tr.getAttribute('data-uid')).cells; 
    if(this.Grid.columns.length < cell.length){ 
          this.Grid.getRowObjectFromUID(tr.getAttribute('data-uid')).cells = this.Grid.getRowObjectFromUID(tr.getAttribute('data-uid')).cells.slice(1); 
    } 
  } 



We have already considered “Batch edit misbehaves when enable allow drag and drop in Grid” as a bug and logged a defect report for the same and the fix for issue will be available on 17th April 2019. You can now track the current status of your request through this link https://www.syncfusion.com/feedback/4846/batch-edit-misbehaves-when-allowdraganddrop-enabled

Regards, 
Thavasianand S. 


Thanks. But the workaround still has some issues like when I click on the Cancel button. We will wait until the fixe gets released. 

I have another question about Batch Grid. Please find it below. 

1) We have added a template for a column inside the batch grid to display an Input box which can be editable without double-clicking on the cell. But we are having a hard time to implement Validations on this input box just like the Syncfusion inbuilt validation. How can we implement validation just like how it works without templates? It would be nice if you could provide a code sample for it.

Thanks

Pavithra Subramaniyam [Syncfusion]
Replied On April 24, 2019 09:05 AM UTC

Hi Kishore, 
 
Thanks for your udapte. 
 
We have validated the provided information and created a sample based on your requirement. In the below sample, we have rendered input box and applied validation(required field) for the input element in Grid. 
 
Please find the below code example and updated sample for more information. 
 
<ejs-grid #batchgrid id='Batchgrid' (actionFailure)='actionFailure($event)' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' 
  [editSettings]='editSettings' [toolbar]='toolbar'> 
  <e-columns> 
    <e-column headerText='Employee Image' allowEditing='false' width='150' textAlign='Center'> 
     <ng-template #template let-data> 
        <form #form="ngForm"> 
          <div class="form-group" style="padding-top:10px;"> 
            <div class="e-float-input"> 
              <input type="text" required #sname='ngModel' [(ngModel)]="data.Name" name={{data.OrderID}} maxlength="10" /> 
            </div> 
            <div *ngIf="sname.invalid && (sname.dirty || sname.touched)" class="alert alert-danger"> 
              <div *ngIf="sname.errors.required"> 
                Name is required. 
              </div> 
            </div> 
          </div> 
        </form> 
      </ng-template> 
    </e-column> 
    <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 
  </e-columns> 
</ejs-grid> 
 
   
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra 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

Live Chat Icon For mobile
Live Chat Icon