CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
Sergei Basharov
Sergei Basharov

Reputation: 53938

How to customize output of the field with UI Grid

I have a set of fields or each row looking like {inBing:true, inOSM:true, inGoogle:false}. Depending on these I want to represent these values as a string, like 'B O', meaning Bing and OSM are enabled and Google is not.

So I need to go through these fields and build an output string.

The question is where can I put and call this function in UI grid?

Upvotes: 0

Views: 90

Answers (2)

PaulL
PaulL

Reputation: 6650

I'd use a filter for this.

Manipulate your data to look like:

{ field1: value1, field2: value2, searchFlags: { inBing: true, inOSM: false, inGoogle: true } }
{ field1: value2, field2: value4, searchFlags: { inBing: false, inOSM: true, inGoogle: false } }
...

And your columnDefs like:

columnDefs: [
  { name: 'field1' },
  { name: 'field2' }, 
  { name: 'searchFlags', cellFilter: 'mapFlags' }
];

Finally, define the filter:

.filter('mapFlags', function( input ) {
  str = '';
  if (v.inBing) str += 'B ';
  if (v.inOSM) str += 'O ';
  if (v.inGoogle) str += 'G';
  return str;
});

There is an example of a filter in http://ui-grid.info/docs/#/tutorial/201_editable

Upvotes: 1

reptilicus
reptilicus

Reputation: 10417

could use a custom cell template like this:

columnDefs: [
      { name: 'name' },
      ...
      { name: 'whichSearchEngines', field: 'some_field', cellTemplate: '<div class="ui-grid-cell-contents" >{{grid.appScope.searchEngineFormatter(row.some_field)}}</div>' }
    ]

$scope.searchEngineFormatter = function (v) {
   str = '';
   if (v.inBing) str += 'B ';
   if (v.inOSM) str += 'O ';
   if (v.inGoogle) str += 'G';
   return str;
};

Upvotes: 0

Related Questions