Guía de estilo CSS de WebDataGrid

Guía de estilo CSS de WebDataGrid

La Guía de estilo de CSS de WebDataGrid proporciona instrucciones para personalizar la apariencia de WebDataGrid mediante CSS. Cubre la modificación de colores, fuentes, tamaños de celda, bordes, fondos y animaciones, así como la aplicación de clases personalizadas para mejorar la experiencia del usuario.

6min read

La Guía de estilo de CSS de WebDataGrid proporciona instrucciones para personalizar la apariencia de WebDataGrid mediante CSS. Cubre la modificación de colores, fuentes, tamaños de celda, bordes, fondos y animaciones, así como la aplicación de clases personalizadas para mejorar la experiencia del usuario.

Styling WebDataGrid

1. CSS Clases aplicadas desde el nivel de control

  1. CssClass: se aplica al marco de la cuadrícula.
  2. HeaderCaptionCssClass: se aplica al título del encabezado de cada columna.
  3. ItemCssClass: se aplica a todas las filas.
  4. AltItemCssClass: se aplica a todas las filas pares.
  5. FooterCaptionCssClass: se aplica al pie de página de cada columna.

2. CSS Clases aplicadas desde el nivel de columna

  1. Header-CssClass – applied to the column Header.
  2. CssClass: se aplica a todas las celdas de la columna.
  3. Footer-CssClass: se aplica a la columna Footer

Nota: Las clases que se aplican en el nivel de columna sobrescribirían las del nivel de control.

3. CSS Clases aplicadas desde niveles de comportamiento

3.1. Activación

  1. ActiveCellCssClass: se aplica a la celda activa.
  2. ActiveColumnCssClass: se aplica al encabezado de la columna de la celda activa.
  3. ActiveRowCssClass: se aplica a la fila de la celda activa.
  4. ActiveRowSelectorCssClass: se aplica al RowSelector de la celda activa.
  5. ActiveRowSelectorImageCssClass: se aplica al área de la imagen del RowSelector de la celda activa.

3.2. Column fixing

  1. CellCssClass: se aplica a las celdas de columna fija.
  2. FooterCssClass: se aplica a pies de página de columna fijos.
  3. HeaderCssClass: se aplica a encabezados de columna fijos.
  4. SeparatorCssClass: se aplica a la línea de separación que separa las columnas fijas de las normales.

3.3. Column moving 

  1. TopDragIndicatorCssClass: se aplica a la parte superior del indicador de colocación.
  2. MiddleDragIndicatorCssClass: se aplica a la parte central del indicador de colocación.
  3. BottomDragIndicatorCssClass: se aplica a la parte inferior del indicador de colocación.
  4. DragMarkupCssClass: se aplica a DragMarkup. Si se usa el marcado de arrastre predeterminado, esta clase se aplicará además de los estilos ya aplicados al encabezado, si se reemplaza el marcado de arrastre, solo se usará DragMarkupCssClass.

3.4. Column resizing 

  1. ResizeIndicatorCssClass: se aplica a la línea del indicador de cambio de tamaño

3.5. Editing 

  1. EditCellCssClass: se aplica a la celda que se está editando.
  2. AddNewRowCssClass: se aplica a AddNewRow.
  3. AddNewRowSelectorImageCssClass: se aplica al área de imagen de RowSelector de AddNewRow.

3.6. Filtering 

  1. EditCellCssClass: se aplica a la celda de filtro que se está editando.
  2. FilterButtonCssClass: se aplica al botón del archivador.
  3. FilteringCssClass: se aplica a la fila de filtro.
  4. FilterRowSelectorImageCssClass: se aplica al área de la imagen del RowSelector de la fila de filtro.
  5. FilterRuleDropDownCssClass: se aplica a la lista desplegable de reglas de filtro.
  6. FilterRuleDropDownHoverItemCssClass: se aplica al elemento desplazado de la lista desplegable de reglas de filtro.
  7. FilterRuleDropDownItemCssClass: se aplica a los elementos del menú desplegable de la regla de filtro.
  8. FilterRuleDropDownSelectedItemCssClass: se aplica al elemento seleccionado de la lista desplegable de reglas de filtro.

3.7. Paginación

  1. PagerCssClass: se aplica al marco del paginador.
  2. CurrentPageLinkCssClass: se aplica al índice de la página actual en el modo numérico.
  3. PageLinkCssClass: se aplica a los vínculos de índice del paginador que no sean el actual en el modo numérico.

 3.8. Row Selectors

  1. HeaderRowSelectorCssClass: se aplica al selector de filas de la fila de encabezado.
  2. FooterRowSelectorCssClass: se aplica al selector de fila de la fila de pie de página.
  3. RowSelectorCssClass: se aplica a los selectores de fila.

  3.8. Selección

  1. SelectedHeaderCssClass: se aplica al encabezado de columna cuando se selecciona una columna
  2. SelectedCellCssClass: se aplica a la celda seleccionada.
  3. SelectedRowSelectorCssClass: se aplica al selector de filas cuando se selecciona una fila.
  4. SelectedRowSelectorImageCssClass: se aplica a la imagen del selector de filas cuando se selecciona una fila.

Using CSS selectors

Las clases CSS se aplican a cada celda de WebDataGrid. Así que imaginemos que tenemos una cuadrícula con muchos registros, lo que significa que tenemos que aplicar una clase css tantas veces. Al hacerlo, se ampliará significativamente el HTML que debe renderizarse, lo que inevitablemente reduce el rendimiento. Para evitar esto, WebDataGrid usa selectores CSS.

Por ejemplo, existe esta clase CSS predeterminada llamada igg_Item, que debe aplicarse a cada celda. Así es como se hace:

tbody.Igg_Item > tr > td
{
     /* style */
}

Se debe usar el mismo patrón para aplicar clases CSS personalizadas.

  1. Para cualquier clase CSS que tenga como destino celdas en el cuerpo, la clase CSS debe escribirse de la siguiente manera:
tbody.NewCellClass > tr > td
{
    /*styles*/
}

Es aplicable a la propiedad ItemCssClass del nivel de control y a la CellCssClass del comportamiento de fijación de columnas.

  1. Para cualquier otra clase que tenga como destino celdas específicas en la cuadrícula, los selectores deben usarse de la siguiente manera:
tbody > tr > td.NewCellClass
{
    /*styles*/
}

Es aplicable a las siguientes propiedades:

  • column level: CssClass
  • activation behavior: ActiveCellCssClass
  • selection behavior: SelectedCellCssClass
  1. Para cualquier clase CSS que tenga como destino una fila, la clase CSS debe escribirse de la siguiente manera:
tbody > tr.NewRowCssClass > td
{
    /*styles*/
}

Es aplicable a lo siguiente:

  • control level:   AltItemCssClass
  • activation behavior: ActiveRowCssClass

En el código siguiente se muestra cómo aplicar diferentes estilos a las celdas de la cuadrícula.

<style type="text/css">
        .HeaderCaptionClass
        {
            text-align: center;
        }
        tbody.NewItemClass > tr > td
        {
            color: blue;
            text-align: center;
        }
        tbody > tr.ActiveRowClass > td
        {
            background-color: Red;
        }
        tbody > tr > td.ColumnLevelCssClass
        {
            text-decoration: underline;
        }
        tbody > tr > td.SelectedCellClass
        {
            font-weight: bold;
        }
        tbody > tr > td.ActiveCellClass
        {
            background-color: Yellow;
        }
</style>
<ig:WebDataGrid runat="server" ID="wdgCustomers" DataSourceID="AccessDsCustomers"
        HeaderCaptionCssClass="HeaderCaptionClass" DataKeyFields="CustomerID" AutoGenerateColumns="false"
        Width="88%" ItemCssClass="NewItemClass" Height="400">
        <Columns>
            <ig:BoundDataField CssClass="ColumnLevelCssClass" Key="Country" DataFieldName="Country"
                Header-Text="Country" />
            <ig:BoundDataField Key="City" DataFieldName="City" Header-Text="City" />
            <ig:BoundDataField Key="CompanyName" DataFieldName="CompanyName" Header-Text="Company" />
            <ig:BoundDataField Key="ContactName" DataFieldName="ContactName" Header-Text="Contact" />
            <ig:BoundDataField Key="Phone" DataFieldName="Phone" Header-Text="Phone"/>
        </Columns>
        <Behaviors>
            <ig:Activation ActiveCellCssClass="ActiveCellClass" ActiveRowCssClass="ActiveRowClass">
            </ig:Activation>
            <ig:Selection SelectedCellCssClass="SelectedCellClass">
            </ig:Selection>
        </Behaviors>
    </ig:WebDataGrid>
    <asp:AccessDataSource ID="AccessDsCustomers" runat="server" DataFile="~/App_Data/Nwind.mdb"
        SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [Phone], [Country] FROM [Customers] ORDER BY [Country]">
    </asp:AccessDataSource>

Notes:

  • Las clases css con selectores siempre tienen prioridad y, si los selectores se omiten en las clases personalizadas, el estilo puede tener un aspecto diferente al esperado.
  • Un posible efecto secundario de los selectores css puede ser que estos estilos se apliquen a TODOS los elementos td del cuerpo (no solo a los elementos td de primer nivel como con la notación de corchetes angulares), incluidos los de las plantillas de celda, por lo que el trabajo con los selectores debe realizarse con cuidado.
  • Internet Explorer 6 no admite selectores con formato de corchete angular ('>').  Para las aplicaciones que tienen como destino IE6, se debe omitir el corchete angular. Ejemplo:
tbody tr.NewRowCssClass td

{
    /*styles*/
}
Cómo
Solicitar una demostración