CODEWITHSUNDEEP
javascripttouchag-grid
Simon Nicholls
Simon Nicholls

Reputation: 655

AG Grids Touch Event On Edit Cell

I can't get the editing of cells on an ag-grid to work with touch events on a phone or tablet, it is working fine with a mouse click.

I also can't get the dragging of columns into the pivot option in the toolbar to work using touch.

Is there anyway round this?

Upvotes: 0

Views: 1960

Answers (1)

Simon Nicholls
Simon Nicholls

Reputation: 655

So I've managed to fix the editing of cells with a very small edit to the library:

Editing cell with touch

I simply added the touchstart touch event to the double click handler - I will make my own touch handler that is separate at some point when I have time as the double click may well do more than edit cells.

Code:

 RenderedCell.prototype.addCellDoubleClickedHandler = function () {
            var that = this;
            var colDef = this.column.colDef;
            this.vGridCell.addEventListener('dblclick', function (event) {
                // always dispatch event to eventService
                var agEvent = that.createEvent(event, this);
                that.eventService.dispatchEvent(grid.Events.EVENT_CELL_DOUBLE_CLICKED, agEvent);
                // check if colDef also wants to handle event
                if (typeof colDef.onCellDoubleClicked === 'function') {
                    colDef.onCellDoubleClicked(agEvent);
                }
                if (!that.gridOptionsWrapper.isSingleClickEdit() && that.isCellEditable()) {
                    that.startEditing();
                }
            });
            //TOUCH HANDLER
            this.vGridCell.addEventListener('touchstart', function (event) {
                // always dispatch event to eventService
                var agEvent = that.createEvent(event, this);
                that.eventService.dispatchEvent(grid.Events.EVENT_CELL_DOUBLE_CLICKED, agEvent);
                // check if colDef also wants to handle event
                if (typeof colDef.onCellDoubleClicked === 'function') {
                    colDef.onCellDoubleClicked(agEvent);
                }
                if (!that.gridOptionsWrapper.isSingleClickEdit() && that.isCellEditable()) {
                    that.startEditing();
                }
            });

        };

I'll look at the drag and drop functionality too although that's less of a priority for me at the moment. Seems AG Grids has written their own functionality for that so I'm sure using the touch events this can be replicated to work for touch.

Tested and working in the GOOD browser on the iPhone 6

Upvotes: 2

Related Questions