Wijmo 5 - PivotPanel Custom Layout

Customizing PivotPanel Layout CheckBoxes for Fields

by Manish Gupta

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 id="panel" items-source="data" control="thePanel">
  </wj-pivot-panel>
  <wj-pivot-grid items-source="thePanel">
  </wj-pivot-grid>

  </div>

CSS

.wj-flexgrid {
  height: 150px; 
  margin-top:10px;
 }
 .wj-flexchart {
   height: 300px;
 }
 /* The container */
.custom{    
    display: block;
    position: relative;
    padding-left: 5px;
    margin-bottom: 12px;
    cursor: pointer;
    padding-top:3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.custom input {
    position: absolute;
    opacity: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    width: 25px;
    background-color: #2196F3;
}

/* On mouse-over, add a grey background color */
.custom:hover {
    border:1px solid #2196F3;    
 }

/* When the checkbox is checked, add a blue background */
.custom input:checked ~ .checkmark {
    border:1px solid #2196F3;
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.custom input:checked ~ .checkmark:after {
    display: inline-block;
}
.custom input:checked ~ .custom{
    border:1px solid #2196F3;
}
/* Style the checkmark/indicator */
.custom .checkmark:after {    
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

JavaScript

// 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...