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" 
                  selection-changed="selectionChanging(s,e)" 
                  cell-edit-ending="cellEditEnding(s,e)"
                  cell-edit-ended="cellEditEnded(s,e)"
                  item-formatter="itemFormatter" >
        <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 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">
                <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">
                <wj-input-date value="$value" required="false"> </wj-input-date>
            </wj-flex-grid-cell-template>
        </wj-flex-grid-column>
    </wj-flex-grid>
</div>

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';
                        }
                    }
                }
            }
            function init(s, e) { }
            function cellEditEnding(s, e) { }
            function cellEditEnded(s, e) {
                editEndedValidation =...