Wijmo 5 [Grid last row set for editing and scroll]

In flex grid last row selected and ready to edit along with this automatic scroll to the row

by Manish Gupta

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.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/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="app" ng-controller="appCtrl">
  <p>Wijmo <b>FlexGrid</b>
  </p>
  <p>
    <br/>Enter any value less than 1000 in sales column and observe that it does not allow you to exit the edit mode</p>
  <wj-flex-grid items-source="data" 
                initialized="init(s,e)" 
                cell-edit-ending="cellEditEnding(s,e)" 
                selection-changing="selectionChanging(s,e)" 
                style="height:200px" 
                item-formatter="gridItemFormatter" 
                allow-add-new="true"
                beginning-edit="beginningEdit(s,e)"
                scroll-position-changed="scrollPositionChanged(s,e)">
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
    <wj-flex-grid-column header="Description" binding="desc"></wj-flex-grid-column>
    <wj-flex-grid-column header="Sales" binding="sales" width="1000"></wj-flex-grid-column>
    <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
    <wj-flex-grid-column header="Downloads" binding="downloads"></wj-flex-grid-column>
  </wj-flex-grid>
</div>

CSS

.isError {
  background-color: 'red';
  color: white;
}

JavaScript

// define app, include Wijmo 5 directives
 var app = angular.module('app', ['wj']);
 // controller
 app.controller('appCtrl', function($scope) {
   $scope.init = function(s, e) {
     $scope.grid = s;
     $scope.grid.isReadOnly = false;
   }

   // create some random data
   var countries = 'US,Germany,UK,Japan,Italy,Greece,a,b,c,d,e,f,g,h,i,j,k,l,m,v,c,d,e,r,t,y,u,d'.split(','),
     data = [];
   for (var i = 0; i < countries.length; i++) {
     data.push({
       id: i,
       country: countries[i],
       desc: "Description of " + countries[i],
       downloads: Math.round(Math.random() * 20000),
       sales: Math.random() * 10000,
       expenses: Math.random() * 5000,
       isError: false
     });
   }
   // expose data as a CollectionView to get events
   $scope.data = new wijmo.collections.CollectionView(data);

   var editedRow, editedCol, isInValid = false,
     editorVal = 0;
   $scope.cellEditEnding = function(s, e) {
     //check if its the desired column and the value is less than 1000
     val=s.activeEditor.value;
     if (e.col == 1 && s.activeEditor.value < 1000) {

       //save the row and column index
       editedRow = e.row;
       editedCol = e.col;
       //set the flag
       isInValid = true;

       // set flag on row also
       s.rows[e.row].dataItem.isError = true;
     } else {
       // set flag on row also
       s.rows[e.row].dataItem.isError = false;
     }
   }
   var isEditing=false,val=null;
   
$scope.scrollPositionChanged=function(s,e){
    if(isEditing){
        isEditing=false;
        var sel= s.selection;        
        setTimeout(function(){
          s.startEditing(true,sel.row,sel.col);
        },0);
    }
}
$scope.beginningEdit=function(s,e){
     isEditing=true;
};
   $scope.gridItemFormatter = function(panel, r, c, cell) {
     var flex = panel.grid,
       rowEntity, cellStyle;
     if (panel.cellType == wijmo.grid.CellType.Cell) {

       //if its calculated column
       if (c === 1) {
         cellStyle =...