Can Anyone help on this question. Is it possible to add a new Row after the last row on-click of Add-New Button in ng2 Smart table. If so, could you please help me with the solution/attribute? Please find the code below.
static settings= {
add: {
addButtonContent: '<i class="nb-plus"></i>',
createButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
confirmCreate: true
},
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: false,
},
columns: {
options: {
title: 'Options',
type: 'html',
width:"30%",
editor:{
type:'list',
config:{
selectText: 'Select',
list:[{value:'Option1',title:'Option1'},
{value:'Option2',title:'Option2'},
{value:'Option3',title:'Option3'},
{value:'Option4',title:'Option4'}]
}
}
},
values: {
title: 'Values',
width:"70%",
type: 'html',
},
},
};
[Image of Add new Row Button from Table] 1
HTML:
<ng2-smart-table [settings]="settings" [source]="settingsSource"
(createConfirm)="validateRecord($event,'cmd')">
</ng2-smart-table>
validateRecord(event,module){
if(module == 'cmd'){
if (event.newData.command !== ""){
event.confirm.resolve(event.newData);
this.emptyRecordError = false;
}
}
}
My requirement is, Everytime when i click on the Add button the row has to be added as the last row.
Ensure add.confirmCreate
is set to true
, which it is for you.
Add the (createConfirm)
event listener
<ng2-smart-table
[settings]="settings"
[source]="data"
(createConfirm)="create($event)"
></ng2-smart-table>
Append the data in the callback, reject the data being prepended.
create(event: { newData: Object; source: DataSource; confirm: Deferred }) {
event.source.append(event.newData);
event.confirm.reject();
}
You'll need these imports
import { DataSource } from 'ng2-smart-table/lib/lib/data-source/data-source';
import { Deferred } from 'ng2-smart-table/lib/lib/helpers';
Digging through the source code here: https://github.com/akveo/ng2-smart-table/blob/master/projects/ng2-smart-table/src/lib/lib/grid.ts I was able to find a way to close the create box afterwards as well
create(event: { newData: Object; source: DataSource; confirm: Deferred }) {
event.source.append(event.newData);
event.confirm.resolve.skipAdd = true;
event.confirm.resolve();
}