Issue

This Content is from Stack Overflow. Question asked by Aleksander Aleksiev

I am using @silevis/reactgrid to display some data in a table. I want to have the upper left corner cell to be clickable and when clicking it, all table cells get selected. Currently, I have added enableRangeSelection, enableRowSelection, enableColumnSelection properties to the ReactGrid component and I have created a custom cell template only for the cell in the upper left corner. In the render method of the template I return button with an onPointerDown event so the cell is not in edit mode. So how should I implement the onPointerDown method, in order to get all table cells selected. Currently, I dispatch ctrl + a key combination to one of the cells, but it is not working. Any other suggestions?

Here is my code:

import * as React from "react"; import { isNavigationKey, getCellProperty, isAlphaNumericKey, keyCodes } from "@silevis/reactgrid";

export class SelectAllTemplate {

getCompatibleCell(uncertainCell) {
    const text = getCellProperty(uncertainCell, "text", "string");
    const value = parseFloat(text);
    return { ...uncertainCell, text, value };
}

handleKeyDown(cell, keyCode, ctrl, shift, alt) {
    if (!ctrl && !alt && isAlphaNumericKey(keyCode))
        return { cell, enableEditMode: true };
    return {
        cell,
        enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER
    };
}

update(cell, cellToMerge) {
    return this.getCompatibleCell({ ...cell, text: cellToMerge.text });
}


handlePointerDown = () => {
    let wells = document.getElementsByClassName('rg-well-cell');


    // let keyboardEvent = new KeyboardEvent('keydown', {
    //     key: 'a',
    //     ctrlKey: true,
    //     bubbles: true,
    //     metaKey: true 
    // });

    // let clickEvent = new Event('focus');

    wells = [...wells];

    console.log('wells', wells[1]);

    wells[1].dispatchEvent(new KeyboardEvent('keydown', {
        key: 'a',
        ctrlKey: true,
        bubbles: true,
        metaKey: true 
    }));

    wells[1].addEventListener('keydown', (e) => {
        console.log('event', e);
    });
}

render() {
    return (
        <div>
            <button onClick={onPointerDown={this.handlePointerDown}}>Click</button>
        </div>
    );
}
};

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.