Slickgrid checkbox event issue

Question

I'm using Slikgrid javascript library and I'm following this tutorial to make a grid with checkboxes : exemple4

the code used is below :

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="examples.css" type="text/css"/>
<link rel="stylesheet" href="../controls/slick.columnpicker.css" type="text/css"/>
<style>
.slick-cell-checkboxsel {
background: #f0f0f0;
border-right-color: silver;
border-right-style: solid;
}
</style>
</head>
<body>
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
<div class="options-panel">
<h2>Demonstrates:</h2>
<ul>
<li>Checkbox row select column</li>
</ul>
<h2>View Source:</h2>
<ul>
<li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-checkbox-row-select.html" target="_sourcewindow"> View the source for this example on Github</a></li>
</ul>
</div>
</div>
<script src="../lib/firebugx.js"></script>
<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>
<script src="../slick.core.js"></script>
<script src="../plugins/slick.checkboxselectcolumn.js"></script>
<script src="../plugins/slick.autotooltips.js"></script>
<script src="../plugins/slick.cellrangedecorator.js"></script>
<script src="../plugins/slick.cellrangeselector.js"></script>
<script src="../plugins/slick.cellcopymanager.js"></script>
<script src="../plugins/slick.cellselectionmodel.js"></script>
<script src="../plugins/slick.rowselectionmodel.js"></script>
<script src="../controls/slick.columnpicker.js"></script>
<script src="../slick.formatters.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
<script>
var grid;
var data = [];
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: false
};
var columns = [];
$(function () {
for (var i = 0; i < 100; i++) {
var d = (data[i] = {});
d[0] = "Row " + i;
}
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxSelector.getColumnDefinition());
for (var i = 0; i < 5; i++) {
columns.push({
id: i,
name: String.fromCharCode("A".charCodeAt(0) + i),
field: i,
width: 100,
editor: Slick.Editors.Text
});
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
})
</script>
</body>
</html>

I'm trying to respond to a checkbox click event but I found no way to handle that. What I would like to do is to create an array that holds the first row elements data like ["Row 0",...] and display it when the first checkbox is checked. How can I handle that event?

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

The event on which you want to take action is onSelectedRowsChanged. The only problem is that there is no direct link back to the specific row that triggered the event, as is available when using getCellFromEvent when listening to other events, such as onMouseEnter.

If you combine the two approaches, you can use onMouseEnter to "track" the current row.

var context = {};
grid.onMouseEnter.subscribe(function (evt, args) {
    var cell = grid.getCellFromEvent(evt)
    context.rowIndex = cell.row;
    context.row = grid.getDataItem(cell.row);
})

Handle the data manipulation / rendering within onSelectedRowsChanged.

grid.onSelectedRowsChanged.subscribe(function (evt, args) {

    if (!context.row) {
        var rows = grid.getData();
        for (r in rows) {
            var row = rows[r]
            for (i = 1; i < columns.length; ++i) {
                row[i] = args.rows.length == 0 ? '' : dataContainer[r][i]
            }
        }
        grid.invalidateAllRows();
    } else {

        var display = args.rows.indexOf(context.rowIndex) >= 0;

        for (i = 1; i < columns.length; ++i) {
            context.row[i] = display ? dataContainer[context.rowIndex][i] : ''
        }

        grid.invalidateRow(context.rowIndex);
    }

    grid.render();
})

In this context, dataContainer is a "map" vs an array. Depending on the size of your data, you would want a faster lookup.

Note This implementation only works if using the RowSelectionModel option of {selectActiveRow:false}. Otherwise, a more custom data handling implementation is required.

Fiddle

How to manage sorting and searching functionality with this example? — Sagar Thakkar, Sep 22 '17 at 11:31

Slickgrid checkbox event issue

1 Answers1

Fiddle