angular-ui-gridui-gridangular-grid

How to set the Focus on Particular Cell in UI Grid


I have a situation where, if I edit Cell1, UI Grid will run validators for Cell1, but I also want to run the validators for Cell2. If Cell2 value is not proper then I want to set focus on Cell2 with validation message set in uiGridValidateService.setValidator().

I am able to run the validator for Cell2 on Cell1 edit using below statement, but not able to highlight Cell2.

Code:

gridApi.grid.validate.runValidators(rowEntity, colDef, rowEntity['Cell2'], NaN, $scope.gridApi.grid);

How can I put focus on a particular cell in UI Grid?


Solution

  • I solved it by below, hope it will help someone with same requirement,

    Rather than trying to set the focus on error field, I just added below code on afterCellEdit().

    if (!rowEntity['$$errors' + fieldName]) {
            rowEntity['$$errors' + fieldName] = {};
        }
        rowEntity['$$errors' + fieldName][validatorName] = true;
        rowEntity['$$invalid' + fieldName] = true;
    

    Where my fieldName is target field which I want to get validated on every cellEdit. So in my case, even if I am editing value of Cell1, I will pass fieldName='Cell2' and it will get validated against my validator that I will pass as 'validatorName'. If it is not proper value then it will highlight cell2 as red and will show its tooltip.

    Hope it will help someone. Let me know if any questions.