EJ2 Angular Grid Batch Edit with Drag and Drop option

[Kishore Bandela]

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.

https://www.syncfusion.com/forums/142751/not-working-drag-and-drop-by-group-on-the-grid

Thanks

Kishore. 

[Thavasianand Sankaranarayanan]

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

    } 

  } 

Sample : https://stackblitz.com/edit/angular-x7a51v-yeqrjk?file=app.component.ts 

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 17^th 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]

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

    } 

  } 

Sample : https://stackblitz.com/edit/angular-x7a51v-yeqrjk?file=app.component.ts 

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 17^th 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]

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> 

 

   

Sample : https://stackblitz.com/edit/angular-x7a51v-yeqrjk?file=app.component.html 

 

Demo sample : https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/template-driven 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.