CODEWITHSUNDEEP
javascriptag-grid
Adam
Adam

Reputation: 2031

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

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:

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

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?

Upvotes: 4

Views: 1804

Answers (2)

dwsndev
dwsndev

Reputation: 810

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
}

Upvotes: 1

Viktor Gusev
Viktor Gusev

Reputation: 685

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);
    },
  };

Upvotes: 1

Related Questions