How to get the rowcol object of a cell DOM element selected in the grid of UIGrid?

Question

I'm using UIGrid. How can I get the row-column object of a selected cell's DOM element in the grid?

$(".ui-grid-cell-focus") this gives you the HTML DOM of the currently focused/selected cell. I'm trying to get the uiGrid row-col object using this HTML DOM value. I dont know how to!

you want to get value object or actual dom? can you show what you have tried (code) — CodingNinja, May 12 '16 at 14:54

score 0 · Answer 1 · answered May 14 '16 at 14:55

Please try as shown below.

js

 var editCellTemplate = '<div class="ngCellText"><button class="btn btn-icon-only 
green height-28" ng-click="grid.appScope.editProperty(row.entity.id)"><i 
class="fa fa-edit"></i></button></div>';

        vm.yourGridOptions = {
                    appScopeProvider: vm,
                    flatEntityAccess: false,
                    fastWatch: true,
                    showHeader: false,
                    columnDefs: [
                        {
                            name: 'id',
                            field: 'id',
                            width: 240,
                        },
                        {
                            name: 'Edit',
                            cellTemplate: editCellTemplate,
                            width: 40,
                        }
                    ],
                    data: []
                };

                //edit property
                vm.editProperty = function (id) {
                  // your logic here
                };

Thank you for the response. However, this is not what I was expecting. I was expecting the rowCol object, which is the JS object of the current cell containing the row object and the column object. Doesn't deal much with the data but more with the row-column information of the UIGrid. — Temp O'rary, May 14 '16 at 20:40

score 0 · Answer 2 · answered May 27 '16 at 05:09

You could try in your gridOptions declaration:

onRegisterApi: function(gridApi){
  gridApi.cellNav.on.navigate($scope,function(newRowcol, oldRowCol){      
    console.log(newRowcol);
  });
}

Just be sure to inject ui.grid.cellNav into your angular module and ui-grid-cellNav in your grid directive view. newRowcol is your row-col object

How to get the rowcol object of a cell DOM element selected in the grid of UIGrid?

2 Answers2