How To Delete the row from the grid using External Button.

[Sarvana]

I have a grid, which has the edit and delete button in the last column. when the delete button clicks it's calling the function, but the data is not removing from the grid. 

My code:

<ejs-grid #PrediemGrid id="PrediemGrid" [dataSource]='griddata' [editSettings]='editSettings' allowPaging='true' allowSorting='true' [pageSettings]='pageSettings'>

<e-columns>

<e-column field='FromDate' headerText='From Date' width=60></e-column>

<e-column field='ToDate' headerText='To Date' width=60></e-column>

<e-column field='NoOfDays' headerText='No Of Days' width=60></e-column>

<e-column field='PerDayEligible' headerText='Per Day Eligibility' width=60></e-column>

<e-column field='Path' headerText='Path' width=60></e-column>

<e-column field='Action' headerText='Action' width='120'>

<ng-template #template let-gridData>

<div class="btn-group">

<button type="button" class="btn btn-default" (click)='prediemRowEdit($event)'>

<i class="fa fa-pencil"></i></button>

<button type="button" class="btn btn-default" (click)='prediemRowDelete($event)'>

<i class="fa fa-trash"></i></button>

</div>

</ng-template>

</e-column>

</e-columns>

</ejs-grid>

My Ts code:

prediemRowDelete(args: any) {

debugger;

this.finalList = this.PrediemGrid.getRowInfo(args.target);

this.PrediemGrid.deleteRecord( this.finalList.rowData.rowIndex, this.PrediemGrid.getSelectedRecords()[0]);

this.finalList.rowData.PerDayEligible

this.TempPerdiemAmount = Number(this.finalList.rowData.PerDayEligible);

this.PerdiemTotalAmount = (Number(this.PerdiemTotalAmount) - this.TempPerdiemAmount);

this.PrediemGrid.refresh();

}

How to remove the data from grid, when they click the delete button.

[Hariharan J V]

Hi Saravana,  

 

Thanks for contacting Syncfusion support. 

 

The editing feature is based on primary key(unique data column), we have checked the given code snippets, In that primary key is not defined in the Grid column, so that deleting is not worked properly. Please refer below sample for primary key column. 

Documentation primary key: https://ej2.syncfusion.com/documentation/grid/api-column.html?lang=typescript#isprimarykey  

Sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/normal-edit  

 

Delete row methods: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#deleterecord  

 

Regards, 

Hariharan