Wijmo 5 [Flex Grid]
Cell validation for combobox and date
by Joel Parks
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://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app='app'ng-controller='appCtrl'>
<wj-flex-grid control="flex"
items-source="data1"
allow-sorting="false"
auto-size-mode="false"
selection-changed="selectionChanging(s,e)"
cell-edit-ending="cellEditEnding(s,e)"
cell-edit-ended="cellEditEnded(s,e)"
item-formatter="itemFormatter"
initialized="initGrid(s,e)"
row-edit-started="rowSizeChange(s,e)">
<wj-flex-grid-column header="ID" binding="id">
</wj-flex-grid-column>
<wj-flex-grid-column header="Country" binding="country">
<wj-flex-grid-cell-template cell-type="CellEdit" auto-size-rows="false">
<wj-combo-box initialized="initCombo(s,e)" items-source="countries" selected-value="$value" is-editable="false"></wj-combo-box>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
<wj-flex-grid-column header="StartDate" format="MM/dd/yyyy" binding="startDate" required="false">
<wj-flex-grid-cell-template cell-type="CellEdit" auto-size-rows="false">
<wj-input-date value="$value" required="false"> </wj-input-date>
</wj-flex-grid-cell-template>
</wj-flex-grid-column>
<wj-flex-grid-column header="EndDate" format="MM/dd/yyyy" binding="endDate" required="false">
<wj-flex-grid-cell-template cell-type="CellEdit" auto-size-rows="false">
<wj-input-date...JavaScript
var app = angular.module("app", ['wj']);
app.controller("appCtrl", function ($scope) {
var data = [];
var countries = 'US,Germany,UK'.split(',');
data.push({ id: '0', country: countries[0], startDate: new Date(2010, 01, 02), endDate: new Date(2011, 03, 04) });
data.push({ id: '1', country: countries[2], startDate: new Date(2014, 07, 06), endDate: new Date(2013, 07, 08) });
data.push({ id: '2', country: countries[0], startDate: new Date(2014, 09, 10), endDate: new Date(2015, 11, 12) });
var getCv = function (data) {
var dataCv = new wijmo.collections.CollectionView(data);
return dataCv;
};
var editEndedValidation = { valid: true };
$scope.flex;
$scope.cellEditEnded = cellEditEnded;
$scope.cellEditEnding = cellEditEnding;
$scope.selectionChanging = selectionChanged;
$scope.init = init;
$scope.countries = countries;
$scope.data1 = getCv(data);
$scope.itemFormatter = function (panel, r, c, cell) {
if (panel.cellType == wijmo.grid.CellType.Cell) {
if (cell.innerHTML=='UK') {
var prevCell=$(cell).prev();
if(prevCell.innerHTML=='0'){
prevCell.css('backgroundColor', 'red');
}
}
if (Date.parse(panel.grid.rows[r].dataItem.startDate) > Date.parse(panel.grid.rows[r].dataItem.endDate)) {
if (panel.columns[c].header == 'StartDate') {
cell.style.backgroundColor = 'Red';
}
}
}
}
$scope.initGrid = function(s,e) {
s.rows.defaultSize = 27;
}
$scope.initCombo = function(s,e) {
//console.log(s);
}
...