Untitled

// Column definitions with checkbox column
var columns = [
    {
        id: 'checkbox',
        name: '<input type="checkbox" id="headerCheckbox">',
        field: 'checkbox',
        width: 30,
        resizable: false,
        sortable: false,
        cssClass: 'cell-checkbox',
        formatter: function(row, cell, value, columnDef, dataContext) {
            if (dataContext._isPadding || dataContext._collapsed || dataContext.groupingKey) {
                return '';
            }
            return '<input type="checkbox" ' + (dataContext.checked ? 'checked' : '') + '>';
        }
    },
    { id: "name", name: "Name", field: "Name", width: 100, sortable: true },
    { id: "age", name: "Age", field: "Age", width: 60, sortable: true },
    { id: "class", name: "Class", field: "ClassName", width: 80, sortable: true },
    { id: "section", name: "Section", field: "Section", width: 80, sortable: true },
    { id: "percentage", name: "Percentage", field: "Percentage", width: 100, sortable: true }
];

// Create grouping controls
var controls = document.createElement('div');
controls.style.margin = '10px';
controls.innerHTML = `
    <div style="margin-bottom: 10px;">
        <label>Group By:</label>
        <select id="primaryGroup">
            <option value="">None</option>
            <option value="ClassName">Class</option>
            <option value="Section">Section</option>
            <option value="Age">Age</option>
        </select>
        
        <label style="margin-left: 15px;">Then By:</label>
        <select id="secondaryGroup">
            <option value="">None</option>
            <option value="ClassName">Class</option>
            <option value="Section">Section</option>
            <option value="Age">Age</option>
        </select>
        
        <button id="applyGrouping" style="margin-left: 10px;">Apply Grouping</button>
        <button id="expandAll" style="margin-left: 5px;">Expand All</button>
        <button id="collapseAll" style="margin-left: 5px;">Collapse All</button>
    </div>
`;
document.body.insertBefore(controls, document.getElementById('myGrid'));

// Initialize grid components
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
var dataView = new Slick.Data.DataView({
    groupItemMetadataProvider: groupItemMetadataProvider,
    inlineFilters: true
});

var options = {
    enableCellNavigation: true,
    editable: false,
    enableColumnReorder: false,
    createPreHeaderPanel: true,
    showPreHeaderPanel: true,
    preHeaderPanelHeight: 25
};

var grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.registerPlugin(groupItemMetadataProvider);

// Apply grouping function
function applyGrouping() {
    var primaryField = document.getElementById('primaryGroup').value;
    var secondaryField = document.getElementById('secondaryGroup').value;
    
    var groupingFields = [];
    
    if (primaryField) {
        groupingFields.push({
            getter: primaryField,
            formatter: function(g) {
                return primaryField + ": " + g.value + "  <span style='color:green'>(" + g.count + " students)</span>";
            },
            aggregators: [
                new Slick.Data.Aggregators.Avg("Percentage")
            ],
            aggregateCollapsed: true,
            lazyTotalsCalculation: true
        });
    }
    
    if (secondaryField) {
        groupingFields.push({
            getter: secondaryField,
            formatter: function(g) {
                return secondaryField + ": " + g.value + "  <span style='color:blue'>(" + g.count + " students)</span>";
            },
            aggregators: [
                new Slick.Data.Aggregators.Avg("Percentage")
            ],
            aggregateCollapsed: true,
            lazyTotalsCalculation: true
        });
    }
    
    dataView.setGrouping(groupingFields);
}

// Handle checkbox clicks
grid.onClick.subscribe(function(e, args) {
    if (args.cell === 0) {
        var item = dataView.getItem(args.row);
        if (item && !item._isPadding && !item._collapsed && !item.groupingKey) {
            item.checked = !item.checked;
            dataView.updateItem(item.id, item);
        }
    }
});

// Handle header checkbox
document.getElementById('headerCheckbox').addEventListener('click', function(e) {
    var checked = e.target.checked;
    
    dataView.getItems().forEach(function(item) {
        if (!item._isPadding && !item._collapsed && !item.groupingKey) {
            item.checked = checked;
            dataView.updateItem(item.id, item);
        }
    });
});

// Add event listeners for grouping controls
document.getElementById('applyGrouping').addEventListener('click', applyGrouping);
document.getElementById('expandAll').addEventListener('click', function() {
    dataView.expandAllGroups();
});
document.getElementById('collapseAll').addEventListener('click', function() {
    dataView.collapseAllGroups();
});

// Set up the data view
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();

// Wire up model events
dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

// Add CSS for better appearance
var style = document.createElement('style');
style.textContent = `
    .cell-checkbox {
        text-align: center;
    }
    .cell-checkbox input[type=checkbox] {
        cursor: pointer;
        margin: 0;
    }
    #headerCheckbox {
        cursor: pointer;
        margin: 0;
    }
    .slick-group-toggle {
        width: 9px;
        height: 9px;
        margin-right: 5px;
    }
`;
document.head.appendChild(style);