Question

43

How to color row on specific value in angular-ui-grid?

rated 0 times [ 48] [ 5] / answers: 1 / hits: 56306 / 10 Years ago, tue, october 14, 2014, 12:00:00

I'm trying to color a row depending on it's value in the new angular-ui-grid 3.0 rc12 but I haven't been able to. The following code used to work in the previous version (ngGrid):

$scope.gridOptions =

    data: 'data.sites'

    tabIndex: -1

    enableSorting: true

    noTabInterference: true

    enableColumnResizing: true

    enableCellSelection: true

    columnDefs: [

      {field: 'sv_name', displayName: 'Nombre'}

      {field: 'sv_code', displayName: 'Placa'}

      {field: 'count', displayName: 'Cuenta'}

    ]

    rowTemplate: <div ng-class={green: true, blue: row.getProperty('count') === 1}

                         ng-repeat=col in colContainer.renderedColumns track by col.colDef.name

                         class=ui-grid-cell

                         ui-grid-cell></div>

and the corresponding css:

.grid {

  width: 100%;

  height: 250px;

}



.green {

  background-color: #2dff07;

  color: #006400;

}



.blue {

  background-color: #1fe0f0;

  color: #153ff0;

}

The problem here is that the expression:

row.getProperty('count') === 1

Doesn't work anymore as it did in ngGrid. Any guesses of how to achive the same in angular-ui-grid (ui-grid.info)

Thanks a lot!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zachary

Add To Favorites

Follow

Total Points: 175

Total Questions: 89

Total Answers: 108

Location: Fiji

Member since Wed, Jul 14, 2021

3 Years ago

zachary questions

1 Bootstrap 5 - Modal Open on Page Load

Tue, Oct 12, 21, 00:00, 3 Years ago

1 React + TypeScript: How to fix return type 'Element[]' is not a valid JSX element.?

Wed, Jun 9, 21, 00:00, 3 Years ago

1 Encountered Error: Material-UI: capitalize(string) expects a string argument. when using snackbar in React Material-UI

Sat, Jul 18, 20, 00:00, 4 Years ago

1 how to format date in jQuery DataTables

Thu, Jun 18, 20, 00:00, 4 Years ago

1 Node.js unable to import ES6 module

Sat, Jan 25, 20, 00:00, 4 Years ago

View All

answered 10 Years ago isaacvalentinn · Accepted Answer

The new ui-grid has a special property for the cellClass:

  $scope.gridOptions = {

    enableSorting: true,

    data:'myData',

    columnDefs: [

      { field: 'sv_name', displayName: 'Nombre'},

      {field: 'sv_code', displayName: 'Placa'},

      { field: 'count', displayName: 'Cuenta',

        cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {

          if (grid.getCellValue(row,col) == 1) {

            return 'blue';

          }

          return 'green';

        }

      }

    ]

  };

Look at his Plunker

Note that I made the color for class green in red because it's better to see and to stir maximal confusion:-)

Update:

Here is the solution for row coloring.

Write your rowTemplate like this:

  var rowtpl='<div ng-class={'green':true, 'blue':row.entity.count==1 }><div ng-repeat=(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name class=ui-grid-cell ng-class={ 'ui-grid-row-header-cell': col.isRowHeader } ui-grid-cell></div></div>';

Here is the forked Plunker

Note that background-color is overwritten by cell backgrounds. Find a way around this by yourself:-)

Sorry for the initial misread of your question. I leave the cellClass part in this answer in case anyone may need it.