Vaadin establece el color de fondo para la fila seleccionada en una cuadrícula

pmueller

Soy nuevo en desarrollo y espero que alguien pueda ayudarme. Acabo de crear una tabla de cuadrícula con un modelo y todo funciona bien. Pero ahora, quiero cambiar el color de fondo de la fila seleccionada. Me doy cuenta de que tengo que crear un tema. Encontré esto en el Foro de Vaadin: https://vaadin.com/forum/thread/17867059/how-to-set-selected-row-opacity-in-vaadin-grid

Esto es lo que ya hice:

  1. Creé una clase html con el código del enlace. Llamé a esta clase grid-selection-theme.html
  2. Puse esta clase en src / main / webapp / frontend / styles / grid-selection-theme.html
  3. En el archivo java con Grid, agregué la importación: @HtmlImport ("frontend: //styles/grid-selection-theme.html);
  4. Agregué el tema a la cuadrícula: mygrid.addThemeName ("grid-selection-theme");

Aquí está el código del otro hilo del foro:

<dom-module id="grid-header" theme-for="vaadin-grid">
  <template>
    <style>
        :host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
                background-color: rgba(255, 0, 0, .50);
        }
    </style>
  </template>
</dom-module>

Pero no funciona.

anasmi

Esto parece funcionar bien para mí, ¿cuál es su versión del marco?

En caso de que esté usando Vaadin 14, necesitaría colocar estilos en el .cssarchivo e importar el archivo usando@CSSImport

  1. Mi archivo de estilo gridStyles.csscontiene:
:host([theme~="grid-selection-theme"]) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
    background-color: red;
}
  1. La clase donde se usa la cuadrícula tiene esta importación definida:
    @CssImport(value = "./styles/gridStyles.css", themeFor = "vaadin-grid")

  2. La cuadrícula tiene un nombre de tema agregado

Cambié un hostselector para reflejar un atributo de tema: en caso de que tenga varias cuadrículas en la misma página, el estilo se aplicará solo al que tienemygrid.addThemeName("grid-selection-theme");

La salida se ve así: ingrese la descripción de la imagen aquí

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

¿Cómo cambiar el color de la fila seleccionada en una cuadrícula?

Cómo cambiar el color de la fila seleccionada en la cuadrícula de kendo en angular

En ag-Grid cuando cambio el fondo de la fila, no hay color para la fila seleccionada (azul por defecto)

Mostrar la fila seleccionada en la vista de cuadrícula

Marque la fila seleccionada al hacer clic con el mouse en la cuadrícula vaadin (SelectionMode.MULTI)

No se puede cambiar el color de fondo de la fila seleccionada en DataTable jQuery

Cómo colorear una fila de la cuadrícula condicional en Vaadin 8?

cambiar el color de fondo de una cuadrícula basado en RadioButton

Cambiar el color de fondo de la columna en la cuadrícula de forma dinámica

¿Cómo puedo obtener el valor del cuadro de texto en la fila seleccionada en la vista de cuadrícula?

¿Cómo obtener los datos de la fila seleccionada en una cuadrícula en angular2?

Cómo averiguar el índice de una fila seleccionada de una cuadrícula agrícola

cómo cambiar el color de los bordes en línea de la cuadrícula vaadin

JavaScript: establece el color de fondo de <td> en la tabla que contiene <select> en función de la <opción> seleccionada

Mientras hace clic en el botón de una fila de botones para ocultar la cuadrícula de datos en la otra fila

Compruebe si tr es una fila par o impar para alternar el color de fondo en la tabla rayada

¿Cómo eliminar una fila de la vista de cuadrícula en el comando Row?

Al seleccionar todas las celdas en una fila de la vista de cuadrícula de datos, configure la fila como seleccionada como propiedad

CSS inhabilitó la entrada en el color de fondo de la columna de la tabla y la fila seleccionada en la tabla

Python PyQt5 QTreeView establece el color de fondo de la fila

Python PyQt5 QTreeView establece el color de fondo de la fila

¿Cómo se cambia el color de fondo de toda la columna de una columna de cuadrícula?

Python matplotlib establece el tamaño del rectángulo de fondo de la leyenda para la especificación de la cuadrícula

Cómo cambiar el color de fondo de una celda no seleccionada en la vista de tabla JavaFx 8

Cómo cambiar el color de fondo de una celda no seleccionada en la vista de tabla JavaFx 8

WPF MVVM RelayCommand varios botones en cada fila de DataGrid, establece el estado del botón habilitado / deshabilitado solo para la fila seleccionada

El color de fondo de la fila de la cuadrícula de datos se vincula a la propiedad en un elemento individual de la colección de la fuente de datos

Cambiar el color de fondo al hacer clic en una fila de la tabla específica

Animar el color de fondo de la cuadrícula usando el guión gráfico en WPF

TOP Lista

  1. 1

    ¿Cómo ocultar la aplicación web de los robots de búsqueda? (ASP.NET)

  2. 2

    OAuth 2.0 utilizando Spring Security + WSO2 Identity Server

  3. 3

    Manera correcta de agregar referencias al proyecto C # de modo que sean compatibles con el control de versiones

  4. 4

    Ver todos los comentarios en un video de YouTube

  5. 5

    uitableview delete button image in iOS

  6. 6

    ¿Título del selector de SwiftUI?

  7. 7

    Swift / Firebase : Facebook 사용자가 계정을 만들 때 Firebase 데이터베이스에 제대로 저장하려면 어떻게해야합니까?

  8. 8

    ¿Es posible reemplazar los valores de un archivo config.properties a través de TFS?

  9. 9

    Representación de mapas 3D en juegos

  10. 10

    Golang ListenAndServeTLS devuelve datos cuando no se usa https en el navegador

  11. 11

    Declarar propiedades reactivas (agregar bloques de componentes dinámicamente desde la inserción de matriz)

  12. 12

    Cómo hacer que SwiftUI Text multilineTextAlignment comience desde arriba y centro

  13. 13

    Cómo depurar una aplicación React en Visual Studio 2019 usando la plantilla "Blank Node.js"

  14. 14

    Múltiples relaciones en la misma tabla con dos columnas Laravel

  15. 15

    No existe tal archivo o directorio cuando se inicia el nombre del directorio con /

  16. 16

    Verilog : 입력 신호를 한 클럭 주기로 지연시키는 방법은 무엇입니까?

  17. 17

    ¿Cómo hacer un generador de ruido Perlin más suave?

  18. 18

    Problème avec le dessin d'un élément Qml avec des appels OpenGL bruts

  19. 19

    El nombre 'HttpContext' no existe en el contexto actual en Razor

  20. 20

    WPF pleine largeur DataGridColumn sur la largeur de DataGrid

  21. 21

    Tengo algunos problemas con el syscall de golang cuando llamo a dll en win7-64

CalienteEtiquetas

Archivo