How to suppress range selection for some columns in ag-grid

Question

ag-grid has a number of properties: enable*. Columns have a number of properties: suppress*. Setting a suppress* for a column has the effect of disabling the effects of some enable* property on the grid, for that column.

For example:

• Docs
• Interactive Code Demo on Plunker

var columnDefs = [
    {field: 'athlete', suppressMovable: true, width: 150, cellClass: 'suppress-movable-col'},
    {field: 'age', lockPosition: true, cellClass: 'locked-col'},
    {field: 'country', width: 150}
];

var gridOptions = {
    suppressDragLeaveHidesColumns: true,
    columnDefs: columnDefs,
    defaultColDef: {
        width: 100
    }
};

In the above example, the 'athlete' column is not movable due to suppressMovable:true. All of the other columns are movable.

I have a grid with enableRangeSelection: true

• Docs
• Interactive Code Demo on Plunker

I would like to prevent the first column from being included in a range selection. However, no column property exists called suppressRangeSelection.

How can I prevent the user from including the first column in range?

Answer 1

Does not seem like ag-grid allows such behavior, but I managed to do so using Range Selection API:

    var gridOptions = {
    columnDefs: columnDefs,
    enableRangeSelection: true,
    rowData: null,
    onRangeSelectionChanged: event => {
        var cellRanges = event.api.getCellRanges();
        if (!cellRanges || cellRanges.length === 0) return;
        var excludeColumn = cellRanges[0].columns.find(
            el => el.getColId() === 'athlete'
        );
        if (!excludeColumn) return;
        var rangeParams = {
            rowStartIndex: cellRanges[0].startRow.rowIndex,
            rowStartPinned: cellRanges[0].startRow.rowPinned,
            rowEndIndex: cellRanges[0].endRow.rowIndex,
            rowEndPinned: cellRanges[0].endRow.rowPinned,
            columns: cellRanges[0].columns
                .map(el => el.getColId())
                .filter(el => el !== 'athlete'),
        };
        event.api.clearRangeSelection();
        event.api.addCellRange(rangeParams);
    },
  };

Answer 2

I needed a way to apply enableFillHandle to a single column without changing the functionality of other columns. This solution works nicely to selectively enable specific columns instead of disabling others. Here's an example based on OP's problem.

Hope this helps someone out there!

function onRangeSelectionChanged(event) {
    // Must match 'field' property of columns.
    const enabledRangeColumns = new Set(['age', 'country']);
    const [range] = event.api.getCellRanges();

    if (range && !enabledRangeColumns.has(range.startColumn.getColId())) {
        event.api.clearRangeSelection();
    }
}

// ...

const gridOptions = {
    // ...
    enableFillHandle: true,
    enableRangeSelection: true,
    onRangeSelectionChanged
}