Wijmo 5 - Bootstrap Glyphs

ChildItemsPath Array

HTML

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

  <h2>
    Using Bootstrap Icons with the FlexGrid</h2>
  <p>
    This sample includes CSS rules that override the default <b>wj-glyph</b>
    rules to use Bootstrap images instead of the wijmo defaults.</p>

  <wj-flex-grid items-source="workers" child-items-path="checks" headers-visibility="Column">
    <wj-flex-grid-column binding="name"></wj-flex-grid-column>
    <wj-flex-grid-column binding="hours"></wj-flex-grid-column>
    <wj-flex-grid-column binding="rate"></wj-flex-grid-column>
  </wj-flex-grid>

  <wj-flex-grid items-source="workers" child-items-path="['checks','earnings']" headers-visibility="Column">
    <wj-flex-grid-column binding="name"></wj-flex-grid-column>
    <wj-flex-grid-column binding="hours"></wj-flex-grid-column>
    <wj-flex-grid-column binding="rate"></wj-flex-grid-column>
  </wj-flex-grid>

  <wj-flex-grid 
    items-source="workers"
    child-items-path="['checks','earnings']"
    headers-visibility="Column"
    initialized="initMerging(s,e)">
    <wj-flex-grid-column binding="name" header="Merged"></wj-flex-grid-column>
    <wj-flex-grid-column binding="hours"header="Merged"></wj-flex-grid-column>
    <wj-flex-grid-column binding="rate"></wj-flex-grid-column>
  </wj-flex-grid>

</div>

CSS

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

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

.wj-flexgrid .wj-group:not(.wj-state-selected):not(.wj-state-multi-selected) {
	background-color: white;
}

/* use Bootstrap icons in our outlines */
.wj-flexgrid .wj-glyph-right {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    border: none;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.wj-flexgrid .wj-glyph-right::before {
    content: "\e159";
}

.wj-flexgrid .wj-glyph-down-right {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    border: none;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.wj-flexgrid .wj-glyph-down-right::before {
  content: "\e160";
}

JavaScript

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

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

	// merge column headers
	$scope.initMerging = function(s, e) {
		s.allowMerging = wijmo.grid.AllowMerging.ColumnHeaders;
    s.columnHeaders.rows[0].allowMerging = true;
	}	
  
  $scope.workers = [{
    name: 'Jack Smith',
    checks: [{
      name: 'check1',
      earnings: [
      	{ name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 },
        { name: 'bonus', hours: 5.0, rate: 30.0}
      ]
    }, {
      name: 'check2',
      earnings: [
      	{ name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }, {
    name: 'Jack Smith',
    checks: [{
      name: 'check1',
      earnings: [
        { name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 }, 
        { name: 'bonus', hours: 5.0, rate: 30.0 }
      ]
    }, {
      name: 'check2',
      earnings: [
        { name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }, {
    name: 'Jane Smith',
    checks: [{
      name: 'check1',
      earnings: [
        { name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 },
        { name: 'bonus', hours: 5.0, rate: 30.0 }
      ]
    }, {
      name: 'check2',
      earnings: [
        { name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }];

});