Wijmo 5 - PivotPanel Custom Layout

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<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/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.olap.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/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" class="container">

  <h1>PivotPanel with Custom Layout</h1>

  <p>
    This is a <b>PivotPanel</b> control with a custom layout. The layout
    was created by changing the <b>PivotPanel.controlTemplate</b>
    property.
  </p>
  <wj-pivot-panel items-source="data" control="thePanel">
  </wj-pivot-panel>
  <wj-pivot-grid items-source="thePanel">
  </wj-pivot-grid>

  </div>

CSS

.wj-pivotpanel {
   min-height: 10em;
 }
 .wj-flexgrid {
  height: 150px; 
  margin-top:10px;
 }
 .wj-flexchart {
   height: 300px;
 }

JavaScript

// customize PivotPanel controlTemplate to show field list and
// drag-drop area side-by-side
// customize PivotPanel controlTemplate to show field list and
// drag-drop area side-by-side
wijmo.olap.PivotPanel.controlTemplate = '<div>' +

  '<div style="display:flex">' +

    // fields
    '<div>' +
      '<label wj-part="g-flds"></label>' +
      '<div wj-part="d-fields"></div>' +
    '</div>' +

    // drag/drop area
    '<div>' +
      '<label wj-part="g-drag"></label>' +
      '<table>' +
        '<tr>' +
          '<td width="50%">' +
            '<label><span class="wj-glyph wj-glyph-filter"></span> <span wj-part="g-flt"></span></label>' +
            '<div wj-part="d-filters"></div>' +
          '</td>' +
          '<td width= "50%" style= "border-left-style:solid">' +
            '<label><span class="wj-glyph">&#10996;</span> <span wj-part="g-cols"></span></label>' +
            '<div wj-part="d-cols"></div>' +
          '</td>' +
        '</tr>' +
        '<tr style= "border-top-style:solid">' +
          '<td width="50%">' +
            '<label><span class="wj-glyph">&#8801;</span> <span wj-part="g-rows"></span></label>' +
            '<div wj-part="d-rows"></div>' +
          '</td>' +
          '<td width= "50%" style= "border-left-style:solid">' +
            '<label><span class="wj-glyph">&#931;</span> <span wj-part="g-vals"></span></label>' +
            '<div wj-part="d-vals"></div>' +
          '</td>' +
        '</tr>' +
      '</table>' +
    '</div>' +
  '</div>' +

  // progress indicator
  '<div wj-part="d-prog" class="wj-state-selected" style="width:0px;height:3px"></div>' +

  // update panel
  '<div style="display:table">' +
    '<label style="display:table-cell;vertical-align:middle">' +
      '<input wj-part="chk-defer" type="checkbox"/> <span wj-part="g-defer"></span>' +
    '</label>' +
    '<button wj-part="btn-update" class="wj-btn wj-state-disabled" style="float:right;margin:6px" disabled></button>' +
  '</div>' +
'</div>';

//...