Untitled

// First, let's modify your data to ensure we have good grouping fields
var data = [];
for (let i = 0; i < 100; i++) {
    data[i] = {
        id: i,
        Name: alp.charAt(Math.floor(Math.random() * 26)) + alp.charAt(Math.floor(Math.random() * 26)) + alp.charAt(Math.floor(Math.random() * 26)) + alp.charAt(Math.floor(Math.random() * 26)),
        Age: Math.round(Math.random() * 50),
        ClassName: Math.round(Math.random() * 12) + 'th',
        Percentage: Math.round(Math.random() * 100),
        Section: ['A', 'B', 'C'][Math.floor(Math.random() * 3)] // Adding section for nested grouping
    }
}

// Create grouping controls
var groupingControls = document.createElement('div');
groupingControls.style.margin = '10px';
groupingControls.innerHTML = `
    <div style="margin-bottom: 10px;">
        <label>Primary Group:</label>
        <select id="primaryGroup">
            <option value="ClassName">Class</option>
            <option value="Section">Section</option>
            <option value="PercentageRange">Percentage Range</option>
        </select>
        
        <label style="margin-left: 15px;">Secondary Group:</label>
        <select id="secondaryGroup">
            <option value="">None</option>
            <option value="ClassName">Class</option>
            <option value="Section">Section</option>
            <option value="PercentageRange">Percentage Range</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(groupingControls, document.getElementById('myGrid'));

// Helper function to get percentage range
function getPercentageRange(item) {
    if (item.Percentage >= 0 && item.Percentage < 33) return "0-33%";
    if (item.Percentage >= 33 && item.Percentage < 66) return "33-66%";
    return "66-100%";
}

// Function to create grouping definition
function createGroupingDefinition(field) {
    let definition = {
        aggregators: [
            new Slick.Data.Aggregators.Avg("Percentage"),
            new Slick.Data.Aggregators.Sum("Percentage")
        ],
        aggregateCollapsed: true,
        lazyTotalsCalculation: true
    };

    switch(field) {
        case "ClassName":
            definition.getter = "ClassName";
            definition.formatter = function(g) {
                return `Class ${g.value} <span style='color:green'>(Count: ${g.count}, Avg: ${Math.round(g.avg.Percentage)}%)</span>`;
            };
            break;
        case "Section":
            definition.getter = "Section";
            definition.formatter = function(g) {
                return `Section ${g.value} <span style='color:blue'>(Count: ${g.count}, Avg: ${Math.round(g.avg.Percentage)}%)</span>`;
            };
            break;
        case "PercentageRange":
            definition.getter = getPercentageRange;
            definition.formatter = function(g) {
                return `Percentage ${g.value} <span style='color:purple'>(Count: ${g.count})</span>`;
            };
            break;
    }
    return definition;
}

// Function to apply grouping
function applyGrouping() {
    const primaryField = document.getElementById('primaryGroup').value;
    const secondaryField = document.getElementById('secondaryGroup').value;
    
    let groupingDefinitions = [];
    
    // Add primary grouping
    if (primaryField) {
        groupingDefinitions.push(createGroupingDefinition(primaryField));
    }
    
    // Add secondary grouping
    if (secondaryField) {
        groupingDefinitions.push(createGroupingDefinition(secondaryField));
    }
    
    dataView.setGrouping(groupingDefinitions);
}

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

// Initialize the grid
var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
var dataView = new Slick.Data.DataView({
    groupItemMetadataProvider: groupItemMetadataProvider
});

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

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

// Set up the data view
dataView.beginUpdate();
dataView.setItems(data);
applyGrouping(); // Apply initial grouping
dataView.endUpdate();

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

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