Wijmo FlexGrid -Custom Validation

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>
<div class="container">

<p>
This FlexGrid performs validation on numeric cells. The CollectionView's getError property and the FlexGrid's showError property are used to display and update a tooltips content when a user tries to edit or commit edits to a sale.<br>
This sample displays a tooltip when the user begins to edit a cell and updates the tooltip content if the user tries to commit invalid data. The Downloads, Sales, Expenses column will only accept positive values, so try entering a negative value and see what happens :)
</p>
<div id="grid" >
</div>
</div>

CSS

.wj-tooltip{
  padding: 0;
  border: 0;
}

.wj-tooltip-error, .tooltip {
  color: white;
  font-size: 20px;
  padding: 12px;
  border-radius: 5px;
}

.wj-tooltip-error{
  background: red;
}
.tooltip {
  background: green;
}
.container{
  margin: auto;
  width: 70%;
  padding: 10px;
}
p{
  font-size:20px;
  padding: 10px;
}
#grid{
  height: 300px;
}

JavaScript

var flexgrid = new wijmo.grid.FlexGrid('#grid');
var tooltip = new wijmo.Tooltip();

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

var cv = new wijmo.collections.CollectionView(data, {
	getError: function(item, property){
  	// add logic for tooltip here
    var retVal = null;
    switch(property) {
    	case 'country':
      case 'downloads':
      	if( item[property] < 0 ){
        	retVal = 'Cannot be negative';
        }
      case 'sales':
      	if( item[property] < 0 ){
      		retVal = 'Cannot be negative';
        }
      case 'expenses':
        if( item[property] < 0 ){
          retVal = 'Cannot be negative';
        }
    }
    if(retVal){
    	setErrorTooltip(retVal);
    }
    return retVal;
  }
});

function setErrorTooltip(msg){
	var selection = flexgrid.selection;
  var cellbounds = flexgrid.getCellBoundingRect(selection.row, selection.col);
  var content = '<div class="wj-tooltip-error">'+msg+'</div>';
  
  tooltip.show(flexgrid, content, cellbounds);
}

// set up the FlexGrid properties and appearance
flexgrid.itemsSource = cv;
flexgrid.showErrors = true;

flexgrid.autoSizeColumns();

// set up the FlexGrid behaviors using event handlers
flexgrid.beginningEdit.addHandler(function(s, e){
	var cellbounds = s.getCellBoundingRect(e.row, e.col);
  var content = '<div class="tooltip"> So far, so good! </div>';
  tooltip.content = '';
  tooltip.show(flexgrid, content, cellbounds);
});

flexgrid.cellEditEnded.addHandler(function(s, e){
	tooltip.hide();
});

// handle DOM mousedown event to keep tooltip on the screen while editing the cell
document.addEventListener('mousedown', function(event){
	event.stopImmediatePropagation();
});