Wijmo 5 [Multiple Column Sorting using JS]

Multiple column sorting in flexgrid detail view using Pure JS

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.20161.154/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20161.154/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.154/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.154/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.154/controls/wijmo.grid.detail.min.js"></script>
    <div id="theGrid"></div>

JavaScript

var detailMode = wijmo.grid.detail.DetailVisibilityMode.ExpandSingle;
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
        
        var getData = function (count) {
            var data = [];

            for (var i = 0; i < count; 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
                });
            }
            return data;
        };
        
        var gridData = new wijmo.collections.CollectionView(getData(40));
        var grid = new wijmo.grid.FlexGrid("#theGrid");
        grid.itemsSource = gridData;
        var detail = new wijmo.grid.detail.FlexGridDetailProvider(grid);

        var detailData = new wijmo.collections.CollectionView(getData(10));
        var sortDesc = new wijmo.collections.SortDescription('country', true);
        var sortColDesc = new wijmo.collections.SortDescription('active', true);
        detailData.sortDescriptions.push(sortDesc);
        detailData.sortDescriptions.push(sortColDesc);
        detail.detailVisibilityMode = wijmo.grid.detail.DetailVisibilityMode.ExpandSingle;
        detail.createDetailCell = function (row) {
            var cell = document.createElement('div');
            var gridDetail = new wijmo.grid.FlexGrid(cell, {
                itemsSource: detailData,
                headersVisibility:wijmo.grid.HeadersVisibility.Column
            });
            return cell;
        }