Adding and Removing Rows in FlexGrid

In most cases, you won't have to write code to add or remove rows from the grid. By default, it will have one row of column headers and one row per bound item (added automatically when you set the grid's itemsSource property.

If you want to allow users to add or remove rows at runtime, use the following properties:

• allowAddNew: Setting this property to true causes the grid to show a new row 'template' at the bottom of the grid. Users may add new rows to the itemsSource array by filling out the cells in the new row template.

• allowDelete: Setting this property to true causes the grid to handle the 'Delete' key and remove selected rows. Users may click row headers to select the row, then press 'Delete' to remove the bound items from the itemsSource array.

• newRowAtTop: Setting this property to true causes the grid to show the new row template at the top of the grid rather than at the bottom.

The grid below shows how this works:

import * as wjGrid from '@mescius/wijmo.grid';

// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
    data.push({
        id: i,
        country: countries[i],
        downloads: Math.round(Math.random() * 20000),
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000
    });
}

//enable allowAddNew and allowDelete in the FlexGrid
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: data,
    allowAddNew: true,
    allowDelete: true
});