Wrong styles when added new row to the bottom

[Domantas]

Hello,

I did rowPosition: "Bottom" on my editable grid and now those added rows has wrong styles. They don't have bottom border and have the same background color (shown in the picture). 

Even when i delete last loaded row, the new last one doesn't have bottom border. It does work fine when new row position is top

[Sathyanarayanamoorthy Eswararao]

Hi Domantas, 

Thanks for contacting Syncfusion support. 

Query : when i delete last loaded row, the new last one doesn't have bottom border 

We were able to reproduce the mentioned issue. To avoid the issue we suggest you to use the workaround given in the below example using the beforeBatchDelete event of the grid. 

Refer the code example below. 

[app.component.html] 

<div id="tab1"> 

    <ej-grid  

               ….. 

 

 [allowSorting]="true" [editSettings]="editSettings"  (beforeBatchDelete)="delete($event)" [allowScrolling]="true" [scrollSettings]="scrollSettings"> 

      <e-columns>       

 

         ….. 

 

      </e-columns>     

    </ej-grid> 

  </div> 

 

[app.component.ts] 

 

  delete(e){ 

        $("tr:last-child").prev().find(".e-rowcell").css("border-bottom-width","1px"); 

    } 

 

[index.html] 

 

<style> 

  .e-gridcontent td.e-updatedtd{ 

         border-bottom-width:1px; 

        } 

  </style> 

Refer the below documentation. 

https://help.syncfusion.com/api/angular/ejgrid#events:beforebatchdelete 

We have prepared a sample for your convenience which can be downloaded from below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/136500/ze/angular2_sample1653061066.zip 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy