javascriptangularangularjstypescriptng2-smart-table

How to add row after the last row in ng2 smart table?


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.


Solution

  • 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();
      }