Wijmo 5 [Flex Grid]

Multi Row with ItemFormatter

by Manish Gupta

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.multirow.min.js"></script>
<div ng-app="app" ng-controller="FlexCtrl">
        <h1>{{title}}</h1>
        <div id="myGrid" style="min-height: 200px;"></div>
    </div>

JavaScript

var app = angular.module('app', []);
        angular.module('app')
          .controller('FlexCtrl', ['$scope',
            function ($scope) {
                $scope.title = "Wijmo Grid Multirow";
                var myDate = new Date();
                $scope.data = [
                 { 'id': 1, 'start': myDate, 'end': myDate, 'username': 'Firstname Lastname', 'role': 'Employee' },
                 { 'id': 2, 'start': myDate, 'end': myDate, 'username': 'Firstname Lastname', 'role': 'Compliance' },
                 { 'id': 3, 'start': myDate, 'end': myDate, 'username': 'Firstname Lastname', 'role': 'Employee' },
                 { 'id': 4, 'start': myDate, 'end': myDate, 'username': 'Firstname Lastname', 'role': 'Compliance' },
                 { 'id': 5, 'start': myDate, 'end': myDate, 'username': 'Firstname Lastname', 'role': 'Employee' },
                 { 'id': 6, 'start': myDate, 'end': myDate, 'username': 'Firstname Lastname', 'role': 'Compliance' }
                ];
                $scope.cvData = new wijmo.collections.CollectionView($scope.data);
                $scope.myGrid = new wijmo.grid.multirow.MultiRow('#myGrid');
                var wjFilter = new wijmo.grid.filter.FlexGridFilter($scope.myGrid);
                $scope.myGrid.initialize(
                {
                    autoGenerateColumns: false,
                    itemsSource: $scope.cvData,
                    layoutDefinition: [
                      {
                          header: "Group 1", colspan: 2, cells: [
                          { header: 'ID', name: 'id', binding: 'id', isReadOnly: true },
                          { header: 'Role', name: 'role', binding: 'role', isReadOnly: true },
                          { header: 'Username', name: 'username', binding: 'username', isReadOnly: true }
                          ]
                      },
                      {
                          cells: [
                          { header: 'Start Date', name: 'start', binding:...