How do I create merged cells in SlickGrid?

Question

Is it possible to create merged cells in SlickGrid? If not, then what other javascript grid solutions allow merged cells.

Answer 1

If you mean cells spanning across multiple columns, this is supported via "colspan" as demonstrated in this example - http://mleibman.github.com/SlickGrid/examples/example-colspan.html.

Spanning cells vertically across multiple rows is not supported.

Answer 2

I have got some codes when using formatter to merge cells in the differnect rows. Tin, please can you check this solution, maybe it's not the best one, but it works fine. thanks.

1) reference VerCellMerged formatter

{ id: "ProductName", name: "ProductName", field: "ProductName", fieldType: "string", width: 120, formatter: Slick.Formatters.VerCellMerged }

2) declare noneline-bottom style, render options object, and a function to return datasource in the page

<style>
  .noneline-bottom
  {
      border-bottom:0;
  }
</style>

<script type="text/javascript">
    var _renderOptions = {
        "lastRendering": 0,
        "isNextMerged": 0,
        "changedCells": {}
    };

    function getRenderDataItmes() {
        var grid = window.pwpProductList.getGridControl();
        var dataView = grid.getData();
        var items = dataView.getItems();

        return items;
    }
</script>

3) write render codes related with these two events of dataview in the javascript file

dataViewProduct = new Slick.Data.DataView({ inlineFilters: true });
gridProduct = new Slick.Grid("#myGridProduct", dataViewProduct, columnsProduct, optionsProduct);
gridProduct.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));

dataViewProduct.beginUpdate();
dataViewProduct.setItems(dsProduct, "ID");
dataViewProduct.endUpdate();

// rows changed
dataViewProduct.onRowsChanged.subscribe(function (e, args) {
    gridProduct.invalidateRows(args.rows);
    gridProduct.render();
    var changes = window._renderOptions.changedCells;
    gridProduct.setCellCssStyles('cell-noneline-bottom', changes);
});

// rows count changed
dataViewProduct.onRowCountChanged.subscribe(function (e, args) {
    gridProduct.updateRowCount();
    gridProduct.render();
    var options = window._renderOptions;
    options.lastRendering = 1;
}); 

4) VerCellMerged formatter source code

function VerCellMergedFormatter(row, cell, value, columnDef, dataContext) {
    var options = window._renderOptions;
    if (options.lastRendering != 1) {
        return;
    }

    var items = window.getRenderDataItmes();
    var fieldName = columnDef.field;
    var rowsLength = items.length;
    var currentItem = items[row];

    var nextRowIndex = row + 1;
    if (nextRowIndex < rowsLength){
        var nextValue = items[nextRowIndex][fieldName];
        if (value == nextValue) {
            if (!options.changedCells[row]) {
                options.changedCells[row] = {};
            }
            options.changedCells[row][fieldName] = "noneline-bottom";
            options.isNextMerged = 1;
            return value;
        }
        else {
            if (options.isNextMerged == 1) {
                options.isNextMerged = 0;
                return;
            }
        }
    }
    return value;
}