Add new empty row at beginning in wijmo grid angular2

Question

I am trying to add a new empty row at the beginning of grid on external button click. Grid is showing perfectly fine.

<wj-flex-grid #flex 
    [itemsSource]="data" 
    [isReadOnly]="true" 
    [headersVisibility]="'Column'" 
    [selectionMode]="'ListBox'" 
    (selectionChanged)="gridSelectionChange($event, flex)" 
    (loadedRows)="onGridLoaded($event)">
</wj-flex-grid>

and data using collectionView:

this.data = new wjcCore.CollectionView(records);

Using [allowAddNew] = 'true', It adds new row in bottom by default. But I want to add at beginning on button click.

Updated:

addNewRow(ctl) {
    this.data.addNew();
}

where addNewRow working fine but adding in bottom:

<a (click)="addNewRow(flex)">add new</a>

Please help how I can achieve this.

Thanks

Answer 1

To set the new row at top, wijmo grid provides a property newRowAtTop.

Modify your code like below:

<wj-flex-grid #flex 
    [newRowAtTop] = "true"
    [itemsSource]="data" 
    [isReadOnly]="true" 
    [headersVisibility]="'Column'" 
    [selectionMode]="'ListBox'" 
    (selectionChanged)="gridSelectionChange($event, flex)" 
    (loadedRows)="onGridLoaded($event)">
</wj-flex-grid>

Note the [newRowAtTop] = "true" part in above code.

Following description of newRowAtTop is copied from this link:

Gets or sets a value that indicates whether the new row template should be located at the top of the grid or at the bottom.

If you set the newRowAtTop property to true, and you want the new row template to remain visible at all times, set the frozenRows property to one. This will freeze the new row template at the top so it won't scroll off the view.

The new row template will be displayed only if the allowAddNew property is set to true and if the itemsSource object supports adding new items.