javascript - bootstrap - kendo ui angular




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

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

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!


@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


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í.


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.





angular-ui-grid