CODEWITHSUNDEEP
angularjsangular-ui-grid
Richard Turner
Richard Turner

Reputation: 441

Angular Ui Grid

apologies if this is really simple but....

I want to display a grid of data but need a look up for some columns. This will become an editable grid but I am suffering with the basics so god help me.

I have two sets of data:

  $gridOptions1.data =  [{"group_id":"1","location_id":"-1","group_name":"Cars","active":"1"},{"group_id":"2","location_id":"1","group_name":"Trains","active":"1"},{"group_id":"3","location_id":"2","group_name":"Buses","active":"0"}]

and

 $scope.locations=[{value: "-1", text: 'All Locations'},
{value: "0", text: 'Location 1'},
{value: "1", text: 'Location 2'},
{value: "2", text: 'Location 3'},
{value: "3", text: 'Location 4'}];

And want to display in the grid.

 $scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
  { field: 'location_id' },
  { field: 'group_name' },
  { field: 'active' },
  { name: 'Location', field:'location_id', cellFilter: 'maplocation:this'}
],
onRegisterApi: function( gridApi ) {
  $scope.grid1Api = gridApi;
}

};

What I need to do is map the location id

I thought I could use a filter but cannot seem to get access to the scope data.

If anyone could give me a simple example of how to do this I would be very grateful as I am struggling to find any examples of what I want to do.

From what I can see the 'this' parameter is a pointer to the record and not the scope in which the grid options is defined.

I don't want to define the data in the filter because it is coming from the database.

Hope that makes sense.

Upvotes: 1

Views: 262

Answers (2)

Richard Turner
Richard Turner

Reputation: 441

Thanks to @Ethnar, here is a workable solution that keeps the template in the source:

columnDefs: [  { field: 'location_id' }, 
 { field: 'group_name' }, 
 { field: active' }, 
 { name: 'Location', field:'location_id',
 cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.formatLocation(row)}}</div>'
}],

Then all is needed is the formatLocation function:

$scope.formatLocation=function(row)
 {
  locationid=row.entity.location_id;
  if(locationid && $scope.locations.length) {
      var selected = $filter('filter')($scope.locations, {value: locationid});
  return selected.length ? selected[0].text : 'Not set';
} else {
  return  'Not set';
  } };

Upvotes: 1

Ethnar
Ethnar

Reputation: 667

If you want to use part of the data that's in your application scope to transform the data displayed in UI grid it's best to go with a custom template and calling in the function from your template.

Something like this should work:

columnDefs: [
  { field: 'location_id' },
  { field: 'group_name' },
  { field: 'active' },
  { name: 'Location', field:'location_id', cellTemplate: 'location-template'}
],

And then HTML:

<script type="text/ng-template" id="location-template">
    <div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.formatLocation(row)}}</div>
</script>

Now all you have to do is to define function formatLocation in your controller's scope and do the magic there.

When calling functions from within the cell template, make sure you use grid.appScope to get access to your controller's scope, like in the example I've provided.

Upvotes: 2

Related Questions