Wijmo 5 [Flex Grid]

Hide grouped columns

by Manish Gupta

HTML

<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>
<select id="gMenu">
        <option value="" selected>(no grouping)</option>
        <option value="country">Country</option>
        <option value="amount">Revenue</option>
        <option value="date">Date</option>
        <option value="country,date">Country and Date</option>
        <option value="country,amount">Country and Revenue</option>
        <option value="country,date,amount">Country, Date, and Revenue</option>
    </select>
    <div id="gFlexGrid"></div>

JavaScript

$(document).ready(function () {
            var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
            var data = [];
            for (var i = 0; i < 50; i++) {
                data.push({
                    id: i,
                    country: countries[i % countries.length],
                    date: new Date(2014, i % 12, i % 28),
                    amount: Math.random() * 10000,
                    active: i % 4 === 0
                });
            }

            var grid = new wijmo.grid.FlexGrid('#gFlexGrid'),
  menu = new wijmo.input.Menu('#gMenu'),
  cv = new wijmo.collections.CollectionView(data);

            grid.initialize({
               
                itemsSource: cv
            });
            updateMenuHeader();

            // handle the Menu control's selectedIndexChanged event
            menu.itemClicked.addHandler(function (sender) {
                var groupBy = sender.selectedValue;
                cv.groupDescriptions.clear();
                // display all column 
                var columnLayout = JSON.parse(grid.columnLayout);
                for (var i = 0; i < columnLayout.columns.length; i++) {
                    columnLayout.columns[i].visible = true;
                    
                }
                grid.columnLayout = JSON.stringify(columnLayout);
                
                if (groupBy) {
                    var groupNames = groupBy.split(',');
                    for (var i = 0; i < groupNames.length; i++) {
                        var groupName = groupNames[i];
                        var columnLayout = JSON.parse(grid.columnLayout);
                        for (var j = 0; j < columnLayout.columns.length; j++) {
                            if (columnLayout.columns[j].binding == groupNames[i]) {
                               columnLayout.columns[j].visible = false;
                            }
                        }
                        grid.columnLayout = JSON.stringify(columnLayout);
   ...