CODEWITHSUNDEEP
angular-ui-grid
ChrisV
ChrisV

Reputation: 1309

Unselecting cell with cellNav in ui-grid

This is my first time using ui-grid and I'm finding the API a bit frustratingly limited.

I'm using edit and cellnav together. I have edit on focus turned on, so a single click switches the cell to edit mode. When I click e.g. outside the grid, the edit closes on blur but the cell remains selected. The problem with this is that in a selected cell, clicking once does not put the cell in edit mode.

So, I'm looking for either:

a) A way to deselect the cell when edit closes, or: b) A way for single-click in a selected cell to switch it to edit mode.

Searching the API and Tutorial docs has not yielded a way to do either.

Thanks

Edit: Since I could find no other way to do it I wrote this horrible directive, which I urge you not to copy and use in your own projects. I'm hoping someone will reply with a less loathsome and brittle suggestion, but for now this is all I have.

(function () {
    angular.module('eventApp').directive('autoEdit', function () {
        return function (scope, element, attrs) {
            function doubleClick() {
                $(this, '.ui-grid-cell-focus').dblclick();
            }
            $(element).on('blur', '.ui-grid-cell-focus ~ div input', function () {
                $(this).closest('div').parent().children('.ui-grid-cell-focus').unbind('click', doubleClick).click(doubleClick);
            });
        }
    });
})();

Upvotes: 2

Views: 2498

Answers (3)

Ram
Ram

Reputation: 16814

Extending @Vlad answer 

gridApi.grid.cellNav.clearFocus();
gridApi.grid.cellNav.lastRowCol = null;
gridApi.grid.columns[0].colDef.allowCellFocus = false;

[to fix the issue of clearing selection of first column due to the fix]

Upvotes: 0

JohnLock
JohnLock

Reputation: 431

This is my solution using a decorator to expose a working clearFocus method onto the cellNav API.

angular.module(...)
.config(
    $provide => {
        $provide.decorator('uiGridCellnavDirective', $delegate => {
            const {compile} = $delegate[0];
            $delegate[0].compile = () => {
                const compilation = compile(), {pre} = compilation;
                compilation.pre = ($scope, $elm, $attrs, uiGridCtrl) => {
                    const result = pre($scope, $elm, $attrs, uiGridCtrl);
                    uiGridCtrl.grid.api.cellNav.clearFocus = () => {
                        uiGridCtrl.grid.cellNav.lastRowCol = null;
                        uiGridCtrl.cellNav.clearFocus();
                    };
                    return result;
                };
                return compilation;
            }
            return $delegate;
        });
    }
)

Upvotes: 0

Vlad
Vlad

Reputation: 91

I think you can try to use this "undocumented" functionality: 

gridApi.grid.cellNav.clearFocus();
gridApi.grid.cellNav.lastRowCol = null;

Upvotes: 8

Related Questions