Hi,

I have an issue with igniteui data grid when add a new editable row. So for demoing that I have attached the stackblitz link, a screen to gif capture, and the typescript and html code.

The issue here being on the row edit done click we need to be able to add a new blank empty row and that seems to work fine and when the newly added first row is being edited its seems to be fine then too. And when we click on the done of the newly added row after the edit, another new empty row will be created. So, in this scenario, when I try the double click to go into the edit mode of the second newly added row, the cancel and done banner will overlap on the row. Not sure why this behavior is seen. Could you please help me solve this and find me away. I would appreciate that.

To demo this I have attached all the required code, and links.

Regards,

Anvitha.

https://github-bsgwpw.stackblitz.io/

<div class="sample-wrapper">
    <igx-grid #grid [data]="data" width="100%" height="500px" [primaryKey]="'ProductID'" [rowEditable]="true"
        (rowEditExit)="rowEditExit($event)">
        <igx-column field="ProductID" header="Product ID" [editable]="true"></igx-column>
        <igx-column field="ReorderLevel" header="ReorderLever" dataType="number" [editable]="true"></igx-column>
        <igx-column field="ProductName" header="ProductName" [dataType]="'string'" [editable]="true"></igx-column>

        <igx-column field="OrderDate" [dataType]="'date'" [editable]="true"></igx-column>


        <igx-column class="actionstripheader1" width="67.5px">
            <igx-action-strip class="actionstrip" #actionstrip>
                <button title="Delete" igxButton="icon" igxRipple (click)="deleteRow(actionstrip.context)">
            <igx-icon>delete</igx-icon>                                
        </button>
            </igx-action-strip>
        </igx-column>


    </igx-grid>
</div>

<div class="sample-wrapper">
    <igx-grid #grid [data]="data" width="100%" height="500px" [primaryKey]="'ProductID'" [rowEditable]="true"
        (rowEditExit)="rowEditExit($event)">
        <igx-column field="ProductID" header="Product ID" [editable]="true"></igx-column>
        <igx-column field="ReorderLevel" header="ReorderLever" dataType="number" [editable]="true"></igx-column>
        <igx-column field="ProductName" header="ProductName" [dataType]="'string'" [editable]="true"></igx-column>

        <igx-column field="OrderDate" [dataType]="'date'" [editable]="true"></igx-column>


        <igx-column class="actionstripheader1" width="67.5px">
            <igx-action-strip class="actionstrip" #actionstrip>
                <button title="Delete" igxButton="icon" igxRipple (click)="deleteRow(actionstrip.context)">
            <igx-icon>delete</igx-icon>                                
        </button>
            </igx-action-strip>
        </igx-column>


    </igx-grid>
</div>

.sample-wrapper {
    margin: 0 auto;
    padding: 10px;
}

/* eslint-disable */
export const DATA: any[] = [
  {
    ProductID: 1,
    ProductName: 'Chai',
    SupplierID: 1,
    CategoryID: 1,
    QuantityPerUnit: '10 boxes x 20 bags',
    UnitPrice: 18.0,
    UnitsInStock: 39,
    UnitsOnOrder: 30,
    ReorderLevel: 10,
    Discontinued: false,
    OrderDate: new Date('2012-02-12')
  },
  {
    ProductID: 2,
    ProductName: 'Chang',
    SupplierID: 1,
    CategoryID: 1,
    QuantityPerUnit: '24 - 12 oz bottles',
    UnitPrice: 19.0,
    UnitsInStock: 17,
    UnitsOnOrder: 40,
    ReorderLevel: 25,
    Discontinued: true,
    OrderDate: new Date('2003-03-17')
  },
  {
    ProductID: 3,
    ProductName: 'Aniseed Syrup',
    SupplierID: 1,
    CategoryID: 2,
    QuantityPerUnit: '12 - 550 ml bottles',
    UnitPrice: 10.0,
    UnitsInStock: 13,
    UnitsOnOrder: 70,
    ReorderLevel: 25,
    Discontinued: false,
    OrderDate: new Date('2006-03-17')
  },
  {
    ProductID: 4,
    ProductName: 'Chef Antons Cajun Seasoning',
    SupplierID: 2,
    CategoryID: 2,
    QuantityPerUnit: '48 - 6 oz jars',
    UnitPrice: 22.0,
    UnitsInStock: 53,
    UnitsOnOrder: 30,
    ReorderLevel: 0,
    Discontinued: false,
    OrderDate: new Date('2016-03-17')
  },
  {
    ProductID: 5,
    ProductName: 'Chef Antons Gumbo Mix',
    SupplierID: 2,
    CategoryID: 2,
    QuantityPerUnit: '36 boxes',
    UnitPrice: 21.35,
    UnitsInStock: 0,
    UnitsOnOrder: 30,
    ReorderLevel: 0,
    Discontinued: true,
    OrderDate: new Date('2011-11-11')
  },
  {
    ProductID: 6,
    ProductName: 'Grandmas Boysenberry Spread',
    SupplierID: 3,
    CategoryID: 2,
    QuantityPerUnit: '12 - 8 oz jars',
    UnitPrice: 25.0,
    UnitsInStock: 0,
    UnitsOnOrder: 30,
    ReorderLevel: 25,
    Discontinued: false,
    OrderDate: new Date('2017-12-17')
  }
];
/* tslint:enable */