How to get ng-grid row data using dom?

Question

I am using https://github.com/logicbomb/lvlDragDrop to implement drag and dropping. I applied the directive to the rowTemplate in angular, so each cell will be drag and droppable.

For the most part the actual feature is working, what I want from it is still being implemented. When I select 1 cell and drop it into another, I want the rowEntity of each cell, but I do not know how to get this rowEntity without triggering ng-grid events, such as ngStartCellEdit.

If I could at the very least, get the row index and col index of the cell I drag, it would be a great starting point.

The library I am using is using angular.element to find the element I am dragging, but I have yet to find a way to further find the rowEntity data of the dragged item.

Any suggestions or ideas ?

Huy Hoang Pham Huy Hoang Pham · Accepted Answer · 2015-03-24T06:12:10

Try this:

$scope.dropped = function(dragEl, dropEl) {
   var drag = angular.element(dragEl);
   var cellScope = drag.scope();
   var rowScope = cellScope.$parent;
   var entity = rowScope.row.entity;

   //Short version:
   var entity = angular.element(dragEl).scope().$parent.row.entity;
   var colIndex= cellScope.col.index;
   var rowIndex = rowScope.row.index;
}

This should works for both ng-grid and ui-grid.

Explanation: We used angular.element to convert the HTML element into angular element. Then we use "scope" to get the scope variable bound to that cell. To get the scope of the row, we get the parent of the cell scope. You can read more about it here: https://docs.angularjs.org/guide/scope.

How to get ng-grid row data using dom?

1 Answers