Wijmo 5 [Flex Grid]

Level wise Group Header customization

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20171.293/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20171.293/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20171.293/controls/wijmo.grid.min.js"></script>
 <h1>FlexGrid with custom GroupHeader per level - Pure JS</h1>
    

    <div id="flex1"  style="height:600px;"></div>

CSS

b {
            color: yellow;
            text-shadow: 0 0 2px red;
            margin:0 10px;
        }
          .first-group{
            background-color:green !important;
        }
        .second-group {
            background-color:peachpuff !important;
        }
        .third-group {
           background-color:red !important;
        }

JavaScript

// create 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.random() * 20000,
                    date: new Date(2014, i % 12, i % 28),
                    sales: Math.random() * 10000,
                    discount:0.0000027
                });
            }
           
          
            $(document).ready(function (e) {
                var cvData = new wijmo.collections.CollectionView(data);
                cvData.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('country'));
                cvData.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('date'));
                // store group header property with specified format
                var headers = [];
                for (var i = 0; i < cvData.groupDescriptions.length; i++) {
                    headers.push(
                       cvData.groupDescriptions[i].propertyName.toUpperCase()
                    );
                }
                // initialize grid
                var flex1 = new wijmo.grid.FlexGrid('#flex1');              
                flex1.itemsSource = cvData;
                flex1.itemFormatter = function (panel, r, c, cell) {
                    // grid instance
                    var s = panel.grid;
                    if (panel.rows[r] instanceof wijmo.grid.GroupRow && panel.cellType !== wijmo.grid.CellType.RowHeader) {
                        // collpased/ expand icon , you can change it from default glyph to desire glyph/control 
                        // wj-elem-collapse class is necessary to add
                        var span = '<span class="wj-elem-collapse wj-glyph-down-right"></span>';
                        if (s.rows[r].isCollapsed) {
                            span = '<span...