Ag-grid not keeping row focus on table refresh

1
votes

I have an ag-grid table that refreshes its data every few seconds. Whenever it does this, the selected table row loses focus and I'm trying to figure out a way to force the focus back. I thought it would be as simple as keeping track of the selected node, then setting the values when the refresh occurs but it doesn't seem to be working. Basically, whenever the user makes a selection in the table, I track the node and the focused cell:

function onSelectionChanged() {
    var selectedRowNode = $scope.ResourceCheckoutTableGrid.api.getSelectedNodes()[0];
    $scope.focusedCell = $scope.ResourceCheckoutTableGrid.api.getFocusedCell();
    $scope.selectedRowNode = selectedRowNode;   
}

Then, I load the table data every three seconds:

$scope.startRefresh = function() {
    setInterval(function() {
        $scope.loadTableData();
    },3000)
}

When the table data is reloaded it loses the focus, but I try and bring it back using the saved values:

$scope.loadTableData = function() {
    $http.get('RobotDataInterface/Resource/getAllCheckedOutResources').success(
            function(data) {
                $scope.rowCount = data.length;
                if ($scope.ResourceCheckoutTableGrid.api != undefined) {
                    $scope.ResourceCheckoutTableGrid.api.setRowData(data);
                    $scope.ResourceCheckoutTableGrid.api.sizeColumnsToFit();
                    var node = $scope.selectedRowNode;
                    var cell = $scope.focusedCell;
                    if (node != "" && cell != "") {
                        node.setSelected(true);
                        $scope.ResourceCheckoutTableGrid.api.setFocusedCell(cell.rowIndex, cell.column);
                    }
                }
            }); 
};

If I set a breakpoint, I can see that when it makes these calls:

node.setSelected(true);
$scope.ResourceCheckoutTableGrid.api.setFocusedCell(cell.rowIndex, cell.column);

I can see that the values are what I expect; the node and the focused cell, rowIndex etc are what I expect, but still the selected row loses focus (even though it actually does get set to 'selected = true'. Does anyone know what I'm doing wrong?

2
javascriptangularjsag-grid
setFocusedCell(cell.rowIndex, cell.column) should be setFocusedCell(cell.rowIndex, cell.column.colId) ..it should colId instead of column or use cell.column.getColId() - Naga Sai A
@NagaSaiA Thanks, that got me a bit further - it seems to retain the cell focus now (the cell is highlighted even after the refresh) but the row being highlighted never comes back, just the cell, if that makes sense? - monkeyWithAMachinegun
Could you please make it more specifc or screenshot to debug easily? - Naga Sai A
@NagaSaiA Actually it looks like I was using the wrong call, I'll update with an answer, and thanks for the help! - monkeyWithAMachinegun
I have posted my comment as answer for setting focus, please mark it as answer if it helped you - Naga Sai A

2 Answers

1
votes

To achieve expected result, change cell.column to cell.column.colId in setFocusedCell method

0
votes

Okay it looks like this works for what I was trying to do; rather than the cell focus I needed to set the node itself to selected = true...I could swear I'd done this earlier and even verified it was setting selected to true, but either way this bit of code accomplishes the desired result:

                    $scope.ResourceCheckoutTableGrid.api.forEachNode((node) => {
                        if (node.childIndex === ($scope.selectedRowNode.childIndex)) {
                            node.setSelected(true);
                            return;
                        }
                    });