FlexGrid validation when adding a new row

testing if allowAddNew prevents the CollectionView's getError function from working

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div id="theGrid"></div>
<p>
This FlexGrid demonstrates using validation on an editable FlexGrid with <b>allowAddNew</b> property set to true. 
</p>
<div id="flex">
</div>

</div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < countries.length; i++) {
  data.push({
    id: i,
    country: countries[i],
    date: new Date(2014, i % 12, i % 28),
    amount: Math.random() * 10000,
    active: i % 4 === 0
  });
}

// CollectionView with validation
	var view = new wijmo.collections.CollectionView(data, {
  	getError: function(item, prop) {
	  	if (prop == 'amount' && item.amount < 0) {
      	return 'Amount cannot be negative!';
      }
  	}
  });
  
// create the grid and give it some data
var grid = new wijmo.grid.FlexGrid('#flex', {
	allowAddNew: true,
  itemsSource: view
});

grid.selectionChanged.addHandler(function (s, e){
	if (!s.isReadOnly && e.col >= 0){
  	console.log("selection changed");
  }
});

var data2 = [];
  for (var i = 0; i < 1; i++) {
    data2.push({
    	id: i,
      country: countries[i],
      //sales: Math.random() * 10000,
      sales:null,
      expenses: Math.random() * 5000,
      overdue: (i + 1) % 4 == 0
    });
  }
// show the data in a grid
var view2 = new wijmo.collections.CollectionView(data2, {
  getError: function(item, prop) {
    if (prop == 'sales' && item.sales < 0) {
      return 'Sales cannot be negative!';
    }
    if (prop == 'expenses' && item.expenses < 0) {
      return 'Expenses cannot be negative!';
    }
  }
});
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  itemsSource: view2,
  allowAddNew: true,
  columns: [
    { binding: 'id', header: 'ID', width: 50, isReadOnly: true },
    { binding: 'country', header: 'Country', isRequired: true, dataMap: countries },
    { binding: 'sales', header: 'Sales' },
    { binding: 'expenses', header: 'Expenses' },
    { binding: 'overdue', header: 'Overdue' }
  ]
});