Using Angular UI-Grid, how do you access row entity data without using the row selection?

Question

I am trying to switch from Smart-Table version 1.x to Angular ui-grid (version 3.0), the replacement for ng-grid.
I like nearly everything about ui-grid, but one thing is driving me crazy. In smart-table, there is a value for dataRow, which is a convenient way of referencing the entity within a table.

What I was using it for was populating an html template to include field information from the entity, something like ng-click="$parentScope.edit(dataRow.id)" within the html template placed within a grid cell.

However, in ui-grid, I can't seem to access the entity object without making a formal row or cell selection. Any effort to include it in a cell template results in an object, (row.entity) but I cannot access any of the entity elements, they show up as undefined. Any ideas?

Furthermore, I have been able to execute a method in an html template, but only ones with no parameters, not one trying to use a parameter from the entity itself.

Here is my html template that was working with smart-table:

<a data-toggle="tooltip" data-placement="top" title="View    {{filteredRowCollection}}"   ng-click="$parent.$parent.$parent.$parent.view(dataRow.id)"
   class="glyphicon glyphicon-camera green">
</a>
<a data-toggle="tooltip" data-placement="top" title="Edit {{selectionId}}" ng-click="grid.appScope.edit(row.entity.id)"
   class="glyphicon glyphicon-pencil blue">
</a>
<a data-toggle="tooltip" data-placement="top" title="Delete {{selectionId}}"  ng-click="$parent.$parent.$parent.$parent.delete(dataRow.id)"
   class="glyphicon glyphicon-trash red">
</a>

I was trying to use something like this with ui-grid:

function edit(row){
    . . .
};

row, at this point is an object, as is row.entity. I expected to be able to use something like row.entity.id, one of the fields, but it is undefined.

Small error in my cut and paste. The ng-click line for the edit was actually one of my tests. What is should read is ng-click="grid.appScope.edit(row.entity.id)" — Ted Herrlich
– Ted Herrlich, Commented Feb 17, 2015 at 21:00
Edited as wished. However, you should know that you can edit your own questions yourself: look for the edit button just below your question :) — ccjmne
– ccjmne, Commented Feb 17, 2015 at 22:41

Aneesh Kallarakkal · Accepted Answer · 2015-02-18 06:22:44Z

4

This post can be useful, https://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

Basically, you need to set External scope for your grid, so that you can access data.

answered Feb 18, 2015 at 6:22

Aneesh Kallarakkal

3331 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ted Herrlich Over a year ago

Thank helped a lot! Got it working, but hit one weird snag and found a workaround. I used a cellTemplate for one of the column fields and referenced an HTML file. Worked fine. When I tried the same for a cellHeader, hit errors. What ended up working was taking the HTML and placing it in a var, the using the var reference in the column defs. Worked fine. Just found it to be really strange.

Collectives™ on Stack Overflow

Using Angular UI-Grid, how do you access row entity data without using the row selection?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related