javascript - bootstrap - kendo ui

¿Cómo colorear la fila en un valor específico en la cuadrícula ui angular?

Question

Estoy tratando de colorear una fila dependiendo de su valor en el nuevo angular-ui-grid 3.0 rc12 pero no he podido. El siguiente código solía funcionar en la versión anterior (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>"""

y el css correspondiente:

.grid {
  width: 100%;
  height: 250px;
}

.green {
  background-color: #2dff07;
  color: #006400;
}

.blue {
  background-color: #1fe0f0;
  color: #153ff0;
}

El problema aquí es que la expresión:

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

Ya no funciona como lo hizo en ngGrid. Cualquier conjetura de cómo lograr lo mismo en angular-ui-grid ( ui-grid.info )

¡Muchas gracias!

Answer 1

Tenga en cuenta que el fondo de color se sobrescribe con los fondos de celda. Encuentra una forma de evitar esto por ti mismo :-)

Basado en la respuesta anterior, si desea anular el color de fondo en un nivel de fila, puede usar esto:

.ui-grid-row .ui-grid-cell {
   background-color: inherit !important;
}

Answer 2

@Naushad KM y si alguien tiene que hacer una validación de celda en tiempo real después de una llamada $ http.

Esto es lo que está haciendo:

1. Introduzca un valor en la fila editable.
2. En foco suelto (desenfoque), hace una llamada $ http.
3. Valida el valor de entrada con los datos devueltos.
4. El valor válido será VERDE, el inválido será ROJO.

Example : plnkr.co/edit/bVieULC1SPjLZwY4OzWJ?p=preview

Answer 3

El nuevo ui-grid tiene una propiedad especial para la clase de celda:

  $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'';
        }
      }
    ]
  };

Mira su Plunker

Tenga en cuenta que hice el color para la clase verde en rojo porque es mejor ver y agitar la máxima confusión :-)

Actualizar:

Aquí está la solución para colorear filas.

Escribe tu plantilla de fila de esta manera:

  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>'';

Aquí está el Plunker bifurcado

Tenga en cuenta que el fondo de color se sobrescribe con los fondos de celda. Encuentra una forma de evitar esto por ti mismo :-)

Lo siento por la mala lectura inicial de su pregunta. Dejo la parte de la clase de celda en esta respuesta en caso de que alguien pueda necesitarla.

Answer 4

Por favor prueba esto
see the code here http://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info .
He cubierto muchos colores de celda basados ​​en escenarios como.

1. Los valores negativos de la celda se mostrarán en rojo.
2. Las celdas sucias estarán AMARILLAS.
3. Las celdas editables serán BLANCAS.
4. Las celdas no editables serán GRIS
5. Las celdas de valor total serán DARKGREYED

Darle una oportunidad. Puede ser que puedas agarrar algún conocimiento / idea desde allí.

Answer 5

Simplemente puedes usar una clase css específica

.invalidated {
background-color: #f2dede !important;
}

y agregue ng-class en la plantilla de fila div con el campo ''invalidado'' o llame a una función (el ejemplo está en plnkr):

<div ng-class="{invalidated: row.entity.invalidated}"

Aquí está el plunkr http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview

Espero que ayude.