[Data Grid] Shift+Tab not working

Forge Component
(23)
Published on 29 Mar by OutSystems R&D
23 votes
Published on 29 Mar 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