How can I have a field a look up a value to display on an AngularJS UI Grid?

Question

I need to create an Angular UI Grid that displays a typical list of rows. We are creating our own modal editor, so we will not need integrated drop-down lists for cell editing. However, we do need to take a value in a field of a record and look up another value for display within the field.

For instance, let's say I have the following record structure:

aDataRecord = {
  Id: 1,
  Name: "John Doe",
  FavoriteColor: 3
}

FavoriteColor is actually a value that references information from another set of data. What I want to do is show a value like the one below, for the FravoriteColor:

Id	Name	Favorite Color
1	John Doe	Yellow

The value of "Yellow" is derived from a value in a collection of look-up entities. The code below is similar to our setup for how we store these look-up values in our $scope.

$scope.DDLValues['Colors'] = [
  { Value: 1, Description: 'Red' },
  { Value: 2, Description: 'Orange' },
  { Value: 3, Description: 'Yellow' },
]

To be specific, what I need help with is defining the columnDefs for my grid so that each value in the FavoriteColor field displays Description value coming from the respective $scope.DDLValues object. Here is what the columnDefs looks like, with annotations of where I need assistance.

$scope.gridDefinitions = {
   data: 'peopleCollection',
   columnDefs: [
      { field: 'Id' },
      { field: 'Name' },
      { 
         field: 'FavoriteColor', 
         displayName: 'Favorite Color' 
         //What do I do here to look up "Yellow", vs seeing "3" ???
      },
   ]
};

I am aware that you can create a cellTemplate but I'm not sure how to properly define this need. Also, I can't tell within the documentation if UI-Grid has a way to set parameters on a column for a "Value" field, a "Look up collection", the "Id" field of the collection and finally the "Display" field property.

How can this be done in UI-Grid? Having a look-up field is pretty standard.

REFERENCE

To be clear, I am using AngularJS with the application I'm working on, and the grid tool we're using is called UI Grid, which is found here (http://ui-grid.info/).

Answer 1

You can make your field a lookup value by using the ui-grid editable Cell Template option. This option allows you to specify a template for the cell, which you can use to create a dropdown for the user to select a value from. For example, if you have a list of countries in your application, you can use the following code to create a dropdown for the user to select from:

<div ui-grid-edit-dropdown="row.entity.country" 
     editable-cell-template="ui-grid/dropdownEditor" 
     options="grid.appScope.countries" >
</div>

The countries variable in the above code should be an array of objects containing the value and label for each option in the dropdown.