Showing a unique boolean value in an Angular ui-grid

Question

Showing a unique boolean value in an Angular ui-grid

Hey there! I'm diving into the world of angular and angular ui-grid. I've set up my project using angularjs(v1.4) with angular-ui-grid(v3.0.7).

Here's how I've defined my grid:

seec.gridOptions = {};
  seec.gridOptions.rowEditWaitInterval = -1;
  seec.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
  };

seec.gridOptions.columnDefs = [
    {name: 'pouch', displayName: 'Pouch', enableCellEdit: false, enableHiding: false, width: 250},
    {name: 'content', displayName: 'Content', enableHiding: false, width: 150},
    {
      name: 'units',
      displayName: 'Number of Items',
      type: 'number',
      enableHiding: false,
      width: 150
    },
    {name: 'active', displayName: 'Status', type: 'boolean', enableHiding: false, width: 150}
  ];

The controller fetches data from an http call and populates the grid.

if (response.status === 200) {
    seec.gridOptions.data = angular.copy(seec.data);
}

Currently, the boolean values in the grid are displayed as 'true' or 'false', with a checkbox appearing when double-clicked.

I want to show 'active' for true and 'inactive' for false. Is there a way to achieve this in angular ui-grid?

javascript angularjs angular-ui-grid

Answer 1

Answer №1

There is definitely a way to achieve this! One method you can try is using a cellTemplate and assigning different values to your rows.

I have put together a demonstration on Plunkr to show you how it can be implemented.

Here are the two necessary steps. Firstly, insert a cellTemplate into your column:

cellTemplate: "<div ng-bind='grid.appScope.mapValue(row)'></div>"

Please note that instead of ng-bind, you could also utilize

"<div>{{grid.appScope.mapValue(row)}}</div>"

if that is more comfortable for you.

The second step involves defining your mapping function, like so:

appScopeProvider: {
  mapValue: function(row) {
    // console.log(row);
    return row.entity.active ? 'active' : 'inactive';
  },
}

Answer 2

There is definitely a way to achieve this! One method you can try is using a cellTemplate and assigning different values to your rows.

I have put together a demonstration on Plunkr to show you how it can be implemented.

Here are the two necessary steps. Firstly, insert a cellTemplate into your column:

cellTemplate: "<div ng-bind='grid.appScope.mapValue(row)'></div>"

Please note that instead of ng-bind, you could also utilize

"<div>{{grid.appScope.mapValue(row)}}</div>"

if that is more comfortable for you.

The second step involves defining your mapping function, like so:

appScopeProvider: {
  mapValue: function(row) {
    // console.log(row);
    return row.entity.active ? 'active' : 'inactive';
  },
}

Answer 3

Answer №2

Hey @CMR, I appreciate you sharing the Plunkr with me. Upon reviewing it, I noticed that the mapValue function may be unnecessary in this scenario.

I found that the following code worked for me:

cellTemplate: "<div class='ui-grid-cell-contents'>{{row.entity.active ? 'active' : 'inactive'}}</div>"

(I included the class to align with the other cells). However, I must admit that this solution still feels a bit makeshift to me.

It raises the question of using a function as the field itself: In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?

Personally, I would prefer to see an answer that incorporates the logic directly into the columnDefs.

Answer 4

Hey @CMR, I appreciate you sharing the Plunkr with me. Upon reviewing it, I noticed that the mapValue function may be unnecessary in this scenario.

I found that the following code worked for me:

cellTemplate: "<div class='ui-grid-cell-contents'>{{row.entity.active ? 'active' : 'inactive'}}</div>"

(I included the class to align with the other cells). However, I must admit that this solution still feels a bit makeshift to me.

It raises the question of using a function as the field itself: In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?

Personally, I would prefer to see an answer that incorporates the logic directly into the columnDefs.

Answer 5

Answer №3

To apply an Angular filter to a specific column, you need to specify it in your columnDef like this:

cellFilters : 'yourfiltername:args'

.

The "args" can either be a variable or a value. If it's a string, make sure to use the correct quoting like this:

cellFilters : 'yourfiltername:"active"'

Your filter can be a direct function or a filter name. Check out this example on Plunkr for more information.

Answer 6

To apply an Angular filter to a specific column, you need to specify it in your columnDef like this:

cellFilters : 'yourfiltername:args'

.

The "args" can either be a variable or a value. If it's a string, make sure to use the correct quoting like this:

cellFilters : 'yourfiltername:"active"'

Your filter can be a direct function or a filter name. Check out this example on Plunkr for more information.

Showing a unique boolean value in an Angular ui-grid

Answer №1

Answer №2

Answer №3

Similar questions

`The value of an element within an array changes automatically`

This combination of technologies includes jQuery, Shadowbox, and AJAX

The value of ng-repeat list in AngularJS does not update when its value is changed by an ajax call

Transforming ASP.NET MVC IEnumerable view model into a JSON array of elements

Not all comparisons between two tables are guaranteed to be successful

Issue with Node.js MongoDb query results in the retrieval of all documents instead of the specific

"The reactivity of VueJs array of objects is not triggering properly when there is a change in

Box2dweb: Interaction Point of Collision

Implement React-intl into the designated placeholder within the object

Backend data displayed on carousel presents either all images or none at all

The function driver.switchTo.frame() does not exist

What steps should be taken to resolve the Error encountered while testing Angular Js in netbeans?

What are the best practices for iterating through asynchronous generator functions?

struggling with utilizing ajax for outputting data using PHP and POST variables

Passing events between sibling components in Angular 2Incorporating event emission in

Finding the IP address from a hostname in Node.js: A step-by-step guide

Obtain the appropriate selection in the dropdown based on the model in Angular

What steps should be taken to transform this client-side code into server-side code?

Encountering issues with HMR after relocating files to the /app directory

Sending chosen choice to controller method