Setting Default Values ​​for Newly Added Rows

Background:

By default, when you add a row to a data grid the row is empty. There are many times developers need default values set when adding new rows to their data grid. Wijmo FlexGrid solves this issue with ease using one of its properties.

Steps to Complete:

1. Initiate the grid and set the item source to a new collection view.

2. Use newItemCreator to set default values to newly added rows.

Getting Started:

Initiate the grid and set the item source to a new collection view

Initiate the grid and set its itemSource property to a new collection view.

var grid = new wjGrid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    itemsSource: new wjCore.CollectionView(getData(10)),
    allowAddNew: true,
    columns: [
      { binding: 'id', header: 'Id', width: 50, isReadOnly: true },
      { binding: 'country', header: 'Country', width: '*' },
      { binding: 'discount', header: 'Discount' },
      { binding: 'downloads', header: 'Downloads' },
      { binding: 'sales', header: 'Sales' },
      { binding: 'expenses', header: 'Expenses' },
    ],
  });

Use newItemCreator to set default values to newly added rows

Next, use newItemCreator and assign a function that returns the values to newly created item in the collection view.  The values returned in the function will be the default values. For additional information, please refer to the newItemCreator API.

var grid = new wjGrid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    itemsSource: new wjCore.CollectionView(getData(10), {
      newItemCreator: (t) => {
        return {
          id: getUniqueId(grid.itemsSource.sourceCollection),
          country: 'Default Country',
          discount: 0,
          downloads: 0,
          sales: 0,
          expenses: 0,
        };
      },
    }),
    allowAddNew: true,
    columns: [
      { binding: 'id', header: 'Id', width: 50, isReadOnly: true },
      { binding: 'country', header: 'Country', width: '*' },
      { binding: 'discount', header: 'Discount' },
      { binding: 'downloads', header: 'Downloads' },
      { binding: 'sales', header: 'Sales' },
      { binding: 'expenses', header: 'Expenses' },
    ],
  });

And that's it! You now are adding default values to the newly added rows in your FlexGrid.

You can find an application showcasing this code here.

Happy coding!