Wijmo 5 - Underline Group Rows

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>
<h1>Underline Group Rows</h1>

<p>
    This is a FlexGrid showing aggregate values.
    We use the formatItem event to add a red underline 
    to all but the first cell in group rows:</p>
    
<div id="theGrid"></div>

JavaScript

onload = function() {
    
    // create the FlexGrid (unbound)
    var flex = new wijmo.grid.FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'country', header: 'Country', width: 200 },
            { binding: 'downloads', header: 'Downloads', aggregate: 'Sum' },
            { binding: 'sales', header: 'Sales', aggregate: 'Sum' },
            { binding: 'expenses', header: 'Expenses', aggregate: 'Sum' },
						{ binding: 'active', header: 'Active' },
		]
    });
    
    // give the grid some data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < 100; i++) {
        data.push({
            country: countries[i % countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
						active: i % 3 == 0
        });
    }

    // create CollectionView with grouping
    var view = new wijmo.collections.CollectionView(data);
    view.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('country'));
    flex.itemsSource = view;
    
    flex.formatItem.addHandler(function (s, e) {
				if (e.panel == flex.cells && e.col == 0 && flex.rows[e.row] instanceof wijmo.grid.GroupRow) {
						var chk = document.createElement('input');
						chk.type = 'checkbox';
						chk.style.marginLeft = '6px';
						chk.class = 'custom-check-box';
						var groupData = e.panel.rows[e.row].dataItem;
						var cnt = 0;
						for(var i = 0; i < groupData.items.length; i++) {
								if(groupData.items[i].active == true)
										cnt++;
						}
						chk.checked = cnt > 0;
						chk.indeterminate = cnt > 0 && cnt < groupData.items.length;
						/*chk.onclick = function(e) {
								if(wijmo.hasClass(e.target, 'custom-check-box')) {
										var groupData = flex.rows[flex.selection.row].dataItem;
										for(var i = 0; i < groupData.items.length; i++)...