KB - Wijmo 5 - New Row Placeholders

New Row Placeholders

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.39/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.39/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">

  <h1>New Row Placeholders</h1>

  <p>
    This is a <b>FlexGrid</b> control.
    We used the <b>formatItem</b> event to add some placeholder content
    to the cells in the new row template.
    We also used CSS to customize the appearance of the cells in the
    new row template.
  </p>
  <wj-flex-grid initialized="initGrid(s,e)">
  </wj-flex-grid>

</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-top: 10px;
}

.wj-flexgrid .wj-cell.wj-new {
  color: #808080;
  font-style: italic;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function($scope) {

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

  // initialize grid
  $scope.initGrid = function(s, e) {
    var grid = s;
    grid.initialize({
      autoGenerateColumns: false,
      allowAddNew: true,
      itemsSource: data,
      columns: [{
        binding: 'country',
        header: 'Country',
        width: '2*'
      }, {
        binding: 'downloads',
        header: 'Downloads',
        width: '*'
      }, {
        binding: 'sales',
        header: 'Sales',
        width: '*'
      }, {
        binding: 'expenses',
        header: 'Expenses',
        width: '*'
      }, ]
    });
		
		grid.rowAdded.addHandler(function(s, e) {
			var newItemAdded = {
				country: 'US',
				downloads: Math.round(Math.random() * 20000),
				sales: Math.random() * 10000,
				expenses: Math.random() * 5000
			};
			var oldCollection = grid.collectionView.items;
			oldCollection[oldCollection.length - 1] = newItemAdded;
			grid.itemsSource = oldCollection;
			grid.refresh();
		});

    // show placeholders in new row template
    grid.formatItem.addHandler(function(s, e) {
      if (e.panel == grid.cells) { // cells panel
        if (grid.rows[e.row].dataItem == null) { // no data: new row		
          e.cell.textContent = grid.columns[e.col].binding;
        }
      }
    });
  }
});