Untitled

// First, add a checkbox column to your columns definition
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._collapsed || dataContext._isPadding || dataContext.groupingKey) {
                return '';  // Don't show checkbox for group rows
            }
            return '<input type="checkbox" ' + (value ? 'checked' : '') + '>';
        }
    },
    { id: "name", name: "Name", field: "Name", cssClass: "cell-name", sortable: true, editor: Slick.Editors.Text, validator: requiredFieldValidator, minWidth: 90 },
    { id: "age", name: "Age", field: "Age", sortable: true, minWidth: 45 },
    { id: "class-name", name: "Class Name", field: "ClassName", minWidth: 90 },
    { id: "percentage", name: "Percentage", field: "Percentage", formatter: statusFormatter, editor: Slick.Editors.Text, sortable: true, groupTotalsFormatter: sumTotalsFormatter, minWidth: 90 },
    { id: "%", name: "%", field: "Percentage", width: 95, resizable: false, formatter: Slick.Formatters.PercentCompleteBar }
];

// Modify your data to include checkbox state
var data = [];
for (let i = 0; i < 100; i++) {
    data[i] = {
        id: i,
        checkbox: false, // Add checkbox state
        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),
    };
}

// Add selection controls
var selectionControls = document.createElement('div');
selectionControls.style.margin = '10px';
selectionControls.innerHTML = `
    <button id="showSelected">Show Selected Students</button>
    <span id="selectionCount" style="margin-left: 15px;"></span>
`;
document.body.insertBefore(selectionControls, document.getElementById('myGrid'));

// Initialize the grid
var options = {
    enableCellNavigation: true,
    editable: true,
    createPreHeaderPanel: true,
    showPreHeaderPanel: true,
    preHeaderPanelHeight: 25
};

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

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

// Handle header checkbox click
document.addEventListener('click', function(e) {
    if (e.target && e.target.id === 'headerCheckbox') {
        var checked = e.target.checked;
        var items = [];
        
        for (var i = 0; i < dataView.getLength(); i++) {
            var item = dataView.getItem(i);
            if (item && !item._collapsed && !item._isPadding && !item.groupingKey) {
                item.checkbox = checked;
                items.push(item);
            }
        }
        
        items.forEach(function(item) {
            dataView.updateItem(item.id, item);
        });
        
        updateSelectionCount();
    }
});

// Update selection count
function updateSelectionCount() {
    var count = 0;
    for (var i = 0; i < dataView.getLength(); i++) {
        var item = dataView.getItem(i);
        if (item && item.checkbox) {
            count++;
        }
    }
    
    document.getElementById('selectionCount').textContent = 
        count > 0 ? `Selected: ${count} student${count !== 1 ? 's' : ''}` : '';
}

// Show selected students
document.getElementById('showSelected').addEventListener('click', function() {
    var selectedStudents = [];
    
    for (var i = 0; i < dataView.getLength(); i++) {
        var item = dataView.getItem(i);
        if (item && item.checkbox) {
            selectedStudents.push(
                `Name: ${item.Name}, Class: ${item.ClassName}, Percentage: ${item.Percentage}%`
            );
        }
    }
    
    if (selectedStudents.length === 0) {
        alert('No students selected!');
    } else {
        alert('Selected Students:\n\n' + selectedStudents.join('\n'));
    }
});

// Add this to your existing dataView setup
dataView.beginUpdate();
dataView.setItems(data);
dataView.setGrouping([{
    getter: "ClassName",
    formatter: function (g) {
        return "Class: " + g.value + "  <span style='color:green'>(" + g.count + " students)</span>";
    },
    aggregators: [
        new Slick.Data.Aggregators.Avg("Percentage")
    ],
    aggregateCollapsed: true,
    lazyTotalsCalculation: true
}]);
dataView.endUpdate();

// Update selection count when data changes
dataView.onRowsChanged.subscribe(function() {
    updateSelectionCount();
});