[Data Grid] Shift+Tab not working

Forge Component
(37)
Published on 11 May (2 weeks ago) by OutSystems R&D
37 votes
Published on 11 May (2 weeks ago) by OutSystems R&D

Hey guys,

Normally when you tab between elements you can use Shift+Tab to focus on the previous element, based on the current element. Within datatables this functionality is ignored and it will always go to the next element.

I believe this to be an easy fix and since it's default web behaviour I feel like it should be implemented into the component aswell.

Solution

I fixed the code for this, it would be nice if somebody from Outsystems R&D could include this in the original componetn aswell, here's the updated onTab function:


onTab: function(gridId, e, onlyEditable) {
        var n = (window.event) ? e.which : e.keyCode;
        var p = e.shiftKey;
        if (n === wijmo.Key.Tab) {
            e.preventDefault();
            e.stopPropagation();
            var gObj = GridOS.ComponentUtils.getGridObjectById(gridId);
            var s = gObj.grid;
            var _col = s.selection.col; // Column
            var _row = s.selection.row; // Row
            //var _columCount = (s.columns.visibleLength - 1);
            var _columnCount = (s.columns.length - 1);
            var _rowCount = (s.rows.length - 1);
            var i = 0;
            if (p) {
                i = _columnCount - 1;   
            }
            if (_col === _columnCount) { // Last column (doesn't mean that is the last visible)
                // last col
                if (_row === _rowCount) { // Last row
                    // last row
                    _row = 0;
                    if (p) {
                        _row = _rowCount;   
                    }
                    if (onlyEditable) {
                        // Skip read only, hidden columns and checkbox columns
                        if (p) {
                            if (i < 0) {
                                _row --;
                                if (_row < 0) { // If first row
                                        _row = _rowCount; // Reset row
                                    }
                                i = _columnCount - 1;
                            }
                            while (!s.columns[i].visible || (s.columns[i] && s.columns[i].isReadOnly) || s.columns[i].dataType === wijmo.DataType.Boolean) {
                                i--;
                                if (i < 0) { // If first column
                                    _row --;
                                    if (_row < 0) { // If first row
                                        _row = _rowCount; // Reset row
                                    }
                                    i = _columnCount - 1; // Reset column
                                }
                            }   
                        } else {
                            while (!s.columns[i].visible || (s.columns[i] && s.columns[i].isReadOnly) || s.columns[i].dataType === wijmo.DataType.Boolean) {
                                i++;
                                if (i >= _columnCount) { // If last column
                                    _row ++;
                                    if (_row > _rowCount) { // If last row
                                        _row = 0; // Reset row
                                    }
                                    i = 0; // Reset column
                                }
                            }   
                        }
                        // Edit first row
                        
                        s.startEditing(false, _row, i, true); 
                    }
                    else {
                        // Skip hidden columns
                        if (p) {
                            if (i < 0) {
                                _row --;
                                if (_row < 0) { // If first row
                                        _row = _rowCount; // Reset row
                                    }
                                i = _columnCount - 1;
                            }
                            while (s.columns[i] && !s.columns[i].visible) {
                                i--;
                                if (i < 0) { // If first column
                                    _row --;
                                    if (_row < 0) { // If first row
                                        _row = _rowCount; // Reset row
                                    }
                                    i = _columnCount - 1; // Reset column
                                }
                            }
                        } else {
                            while (s.columns[i] && !s.columns[i].visible) {
                                i++;
                                if (i >= _columnCount) { // If last column
                                    _row ++;
                                    if (_row > _rowCount) { // If last row
                                        _row = 0; // Reset row
                                    }
                                    i = 0; // Reset column
                                }
                            }
                        }
                    }
                    // Select first row
                    
                    s.select(new wijmo.grid.CellRange(_row, i)); // Go to the first row
                    return true;
                }
                if (onlyEditable) {
                    // Skip read only, hidden columns and checkbox columns
                    if (p) {
                        if (i < 0) {
                            _row --;
                            if (_row < 0) { // If first row
                                    _row = _rowCount; // Reset row
                                }
                            i = _columnCount - 1;
                        }
                        while (!s.columns[i].visible || (s.columns[i] && s.columns[i].isReadOnly) || s.columns[i].dataType === wijmo.DataType.Boolean) {
                            i--;
                            if (i < 0) { // If first column
                                _row --;
                                if (_row < 0) { // If first row
                                    _row = _rowCount; // Reset row
                                }
                                i = _columnCount - 1; // Reset column
                            }
                        }                        
                    } else {
                        while (!s.columns[i].visible || (s.columns[i] && s.columns[i].isReadOnly) || s.columns[i].dataType === wijmo.DataType.Boolean) {
                            i++;
                            if (i >= _columnCount) { // If last column
                                _row ++;
                                if (_row > _rowCount) { // If last row
                                    _row = 0; // Reset row
                                }
                                i = 0; // Reset column
                            }
                        }
                    }
                    // Edit next row
                    if (p) {
                        s.startEditing(false, _row, i, true);
                    } else {
                        s.startEditing(false, _row + 1, i, true); // startEditing(fullEdit?: boolean, r?: number, c?: number, focus?: boolean): boolean   
                    }
                   
                }
                else {
                    // Skip hidden columns
                    if (p) {
                        if (i < 0) {
                            _row --;
                            if (_row < 0) { // If first row
                                    _row = _rowCount; // Reset row
                                }
                            i = _columnCount - 1;
                        }
                        while (s.columns[i] && !s.columns[i].visible) {
                            i--;
                            if (i < 0) { // If first column
                                _row --;
                                if (_row < 0) {
                                    _row = _rowCount; // Reset row
                                }
                                i = _columnCount - 1; // Reset column
                            }
                        }
                    } else {
                        while (s.columns[i] && !s.columns[i].visible) {
                            i++;
                            if (i >= _columnCount) { // If last column
                                _row ++;
                                if (_row > _rowCount) {
                                    _row = 0; // Reset row
                                }
                                i = 0; // Reset column
                            }
                        }
                    }
                }
                    
                // Select next row
                if (p) {
                     s.select(new wijmo.grid.CellRange(_row, i));   
                } else {
                    s.select(new wijmo.grid.CellRange(_row + 1, i));   
                }
            }
            else {
                // not last col
                if (p) {
                    i = _col - 1;
                } else {
                    i = _col + 1;   
                }
                 
                if (onlyEditable) {
                    // Skip read only, hidden columns and checkbox columns
                    if (p) {
                        if (i < 0) {
                            _row --;
                            if (_row < 0) { // If first row
                                    _row = _rowCount; // Reset row
                                }
                            i = _columnCount - 1;
                        }
                        while (!s.columns[i].visible || (s.columns[i] && s.columns[i].isReadOnly) || s.columns[i].dataType === wijmo.DataType.Boolean) {
                            i--;
                            if (i < 0) { // If first column
                                _row --;
                                if (_row < 0) { // If last row
                                    _row = _rowCount; // Reset row
                                }
                                i = _columnCount - 1; // Reset column
                            }
                        }
                    } else {
                        while (s.columns[i] && !s.columns[i].visible) {
                            i++;
                            if (i >= _columnCount) { // If last column
                                _row ++;
                                if (_row > _rowCount) { // If last row
                                    _row = 0; // Reset row
                                }
                                i = 0; // Reset column
                            }
                        }
                    }
                
                    // Edit next column
                    s.startEditing(false, _row, i, true); // startEditing(fullEdit?: boolean, r?: number, c?: number, focus?: boolean): boolean
                }
                else {
                    // Skip hidden columns
                    if (p) {
                        if (i < 0) {
                            _row --;
                            if (_row < 0) { // If first row
                                    _row = _rowCount; // Reset row
                                }
                            i = _columnCount - 1;
                        }
                        while (s.columns[i] && !s.columns[i].visible) {
                            i--;
                            if (i < 0) { // If first column
                                _row --;
                                if (_row < 0) { // If first row
                                    _row = _rowCount; // Reset row
                                }
                                i = _columnCount - 1; // Reset column
                            }
                        }
                    } else {
                        while (s.columns[i] && !s.columns[i].visible) {
                            i++;
                            if (i >= _columnCount) { // If last column
                                _row ++;
                                if (_row > _rowCount) { // If last row
                                    _row = 0; // Reset row
                                }
                                i = 0; // Reset column
                            }
                        }
                    }
                }
                
                // Select next column
                s.select(new wijmo.grid.CellRange(_row, i));
            }
            return false;
        }
    }
Solution

Hi Joey,


Sorry for the late reply. Thanks for reporting the issue (and providing a solution). We'll analyze both the problem and solution for an upcoming release.

Let us know if you find more issues.

Regards,

Ricardo Alves

Hi guys, any update on this one. Still not working.