Update field in multiple rows of slickgrid

Question

My grid (in dataView) contains a field "num", which shows the row number. When I delete a row, the row numbers are no longer contiguous. So I need to update this field for all rows to have a contiguous numbering. (like in Excel, if you delete data in row 5, row number 5 doesn't disappear - only data shifts).

Question : How do I mass-update this field for all rows? (if there is a quicker alternative - please let me know).

Answer 1

For this particular case, you can leverage the row indexing used by the grid to dynamically render the row numbers via the formatter column option. (SlickGrid Examples)

The following code provides delete capability with dynamic row numbering. One important consideration is the use of a slick.dataview which requires batching for multi-row deletes.

<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/examples/examples.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>    
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.checkboxselectcolumn.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
    
<button id='deleteButton'>Delete Selected</button>
<div id="myGrid" style="width:600px;height:300px;"></div>
    
<script>
var grid;
var dataView = new Slick.Data.DataView();
var data = [];
var options = {
    editable: false,
    enableCellNavigation: true
};
var columns = [];
$(function () {
    for (var i = 0; i < 10; i++) {
        var d = (data[i] = {});
        d[0] = "Row " + i;
        d.id = i
        d[1] = i
        d[Math.floor((Math.random() * 4) + 2)] = Math.floor((Math.random() * 10) + 1);
    }
    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,
            formatter: i == 0 ? function(args){ return args} : null
        });
    }

    dataView.setItems(data)

    grid = new Slick.Grid("#myGrid", dataView, columns, options);
    grid.setSelectionModel(new Slick.RowSelectionModel({
        selectActiveRow: false
    }));
    grid.registerPlugin(checkboxSelector);
     
})

$('#deleteButton').click(function () {
    console.log("Delete")
    var selected = grid.getSelectedRows();
    grid.setSelectedRows([]);
    grid.getData().beginUpdate();
    $.each(selected, function (index, value) {
        console.log("Index: " + index)
        console.log("Value " + value)
        var id = grid.getData().getItem(value).id
        grid.getData().deleteItem(id) 
    })
    grid.getData().endUpdate();
    grid.invalidate()
});
</script>