Copy and select the text from ag-grid

Question

I am using the Ag-grid in my project. after came far i got to know that text inside the grid user not able to select. Is there any help i can get to select and copy the text from grid or i need to change to different plugin. I am not in place where i can go back to different UI plugin or i can buy the Ag-grid. Need to find out some code hack for this. I tried below hack but not work.

import {Directive, EventEmitter, Output} from '@angular/core';
import {AgGridNg2} from 'ag-grid-angular';
import {GridApi} from 'ag-grid';

@Directive({
    selector: '[gridRangeRowSelection]',
})

export class AgGridSelectionDirective {

    @Output('gridRangeRowSelection') onChangeEvent = new EventEmitter();

    constructor(grid: AgGridNg2) {
        grid.rangeSelectionChanged.subscribe(event => {
            const api: GridApi = event.api;
            // deselect previous rows
            this.clearPreviousSelections(api);

            const selectedRows = this.getSelectedRows(api);

            this.onChangeEvent.emit({rows: selectedRows});
        });
    }

    public getSelectedRows(api: GridApi) {
        // get all range selections (ctrl+click/drag for multiple selections)
        const rangeSelections = api.getRangeSelections();
        const selectedRows = rangeSelections ? rangeSelections
            .map(rangeSelection => {
                let start = rangeSelection.start.rowIndex;
                let end = rangeSelection.end.rowIndex;
                if (start > end) {
                    [start, end] = [end, start];
                }

                // Equivalent of _.range(startRowIndex, endRowIndex).map(api.getDisplayedRowAtIndex)
                const selectedRowsInRange = [];
                for (let index = start; index <= end; index++) {
                    const selectedRow = api.getDisplayedRowAtIndex(index);
                    if (selectedRow) {
                        selectedRowsInRange.push(selectedRow);
                    }
                }
                return selectedRowsInRange;
            }).reduce((a, b) => a.concat(b), []) : [];

        // Unique selectedRows - as we can have multiple range selections, they may overlap rows.
        const selectedRowSet = Array.from(new Set(selectedRows));
        const selectedRowData = selectedRowSet.map(row => {
            // note we cant use row.setSelected(true), as this will override copy to clipboard
            // for cells to the whole row.
            row.selected = true;
            return row.data;
        });

        // update all newly selected and previously unselected rows
        api.updateRowData({update: selectedRowData});
        return selectedRowData;
    }

    private clearPreviousSelections(api: GridApi) {
        // note this is side-effecting selection so we only do 1 pass.
        const previousSelected = api['rowModel'].rowsToDisplay
            .filter(row => row.selected)
            .map(row => {
                row.selected = false;
                return row.data;
            });
        api.updateRowData({update: previousSelected});
        return previousSelected;
    }
}

https://gist.github.com/nite/dea82d184411a51fc6bc6adc7edaa422

Thanks in advance.

Answer 1

There is a flag which will allow you to select text and then CTRL+C will work.

[enableCellTextSelection]="true"
[ensureDomOrder]="true"

This is not an enterprise config and can be at any time to enable cell text selection.

The above CSS fix is not working in IE>10 versions. So, I thought this would be a better solution.

Docs: https://www.ag-grid.com/javascript-data-grid/selection-overview/

Answer 2

@thirtydot I am not looking range selections, i am looking user can select the few or all text from a cell.

I use this CSS for some grids where it's useful for the user to be able to select and copy part of the text in a cell:

/* enable basic browser text selection in grid cells */
div.ag-root .ag-cell-focus {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

Some CSS that comes with ag-grid disables text selection in cells (with user-select: none;), presumably because it clashes with the range selection enterprise feature. That's not a problem for you though!