Guia de estilo CSS do WebDataGrid

O Guia de Estilo CSS do WebDataGrid fornece diretrizes para personalizar a aparência do WebDataGrid usando CSS. Abrange a modificação de cores, fontes, tamanhos de células, bordas, planos de fundo e animações, bem como a aplicação de classes personalizadas para aprimorar a experiência do usuário.

Styling WebDataGrid

1. CSS Classes aplicadas a partir do nível de controle

1. CssClass – aplicado ao quadro da grade.
2. HeaderCaptionCssClass – aplicado à legenda do cabeçalho de cada coluna.
3. ItemCssClass – aplicado a todas as linhas.
4. AltItemCssClass – aplicado a todas as linhas pares.
5. FooterCaptionCssClass – aplicado à legenda do rodapé de cada coluna.

2. CSS Classes aplicadas no nível da coluna

1. Header-CssClass – applied to the column Header.
2. CssClass – aplicado a todas as células da coluna.
3. Footer-CssClass– aplicado à coluna Footer

Nota: As classes aplicadas no nível de coluna substituiriam as classes no nível de controle.

3. CSS Classes aplicadas a partir de níveis de comportamento

3.1. Ativação

1. ActiveCellCssClass – aplicado à célula ativa.
2. ActiveColumnCssClass – aplicado ao cabeçalho da coluna da célula ativa.
3. ActiveRowCssClass – aplicado à linha da célula ativa.
4. ActiveRowSelectorCssClass – aplicado ao RowSelector da célula ativa.
5. ActiveRowSelectorImageCssClass – aplicado à área da imagem do RowSelector da célula ativa.

3.2. Column fixing

1. CellCssClass – aplicado a células de coluna fixa.
2. FooterCssClass – aplicado a rodapés de coluna fixos.
3. HeaderCssClass – aplicado a cabeçalhos de coluna fixos.
4. SeparatorCssClass – aplicado à linha separadora que separa colunas fixas de colunas regulares.

3.3. Column moving 

1. TopDragIndicatorCssClass – aplicado à parte superior do indicador de soltar.
2. MiddleDragIndicatorCssClass – aplicado à parte central do indicador de soltar.
3. BottomDragIndicatorCssClass – aplicado à parte inferior do indicador de soltar.
4. DragMarkupCssClass – aplicado ao DragMarkup. Se a marcação de arrastar padrão for usada, esta classe será aplicada além dos estilos já aplicados ao cabeçalho, se a marcação de arrastar for substituída, apenas a DragMarkupCssClass será usada.
   

3.4. Column resizing 

1. ResizeIndicatorCssClass – aplicado à linha do indicador de redimensionamento

3.5. Editing 

1. EditCellCssClass – aplicado à célula que está sendo editada.
2. AddNewRowCssClass – aplicado ao AddNewRow.
3. AddNewRowSelectorImageCssClass – aplicado à área da imagem do RowSelector do AddNewRow.

3.6. Filtering 

1. EditCellCssClass – aplicado à célula de filtro que está sendo editada.
2. FilterButtonCssClass – aplicado ao botão do arquivador.
3. FilteringCssClass – aplicado à linha de filtro.
4. FilterRowSelectorImageCssClass – aplicado à área da imagem do RowSelector da linha de filtro.
5. FilterRuleDropDownCssClass – aplicado à lista suspensa da regra de filtro.
6. FilterRuleDropDownHoverItemCssClass – aplicado ao item pairado da lista suspensa da regra de filtro.
7. FilterRuleDropDownItemCssClass – aplicado aos itens da lista suspensa da regra de filtro.
8. FilterRuleDropDownSelectedItemCssClass – aplicado ao item selecionado da lista suspensa da regra de filtro.

3.7. Paginação

1. PagerCssClass – aplicado ao quadro do pager.
2. CurrentPageLinkCssClass – aplicado ao índice de página atual no modo numérico.
3. PageLinkCssClass – aplicado a links de índice do pager diferentes do atual no modo numérico.

 3.8. Row Selectors

1. HeaderRowSelectorCssClass – aplicado ao seletor de linha da linha de cabeçalho.
2. FooterRowSelectorCssClass – aplicado ao seletor de linha da linha de rodapé.
3. RowSelectorCssClass – aplicado a seletores de linha.

  3.8. Seleção

1. SelectedHeaderCssClass – aplicado ao cabeçalho da coluna quando uma coluna é selecionada
2. SelectedCellCssClass – aplicado à célula selecionada.
3. SelectedRowSelectorCssClass – aplicado ao seletor de linha quando uma linha é selecionada.
4. SelectedRowSelectorImageCssClass – aplicado à imagem do seletor de linha quando uma linha é selecionada.

Using CSS selectors

As classes CSS são aplicadas a todas as células do WebDataGrid. Então, vamos imaginar que temos uma grade com muitos registros – isso significa que temos que aplicar uma classe css tantas vezes. Isso aumentará significativamente o HTML que precisa ser renderizado, o que inevitavelmente diminui o desempenho. Para evitar isso, o WebDataGrid usa seletores CSS.

Por exemplo, existe essa classe CSS padrão chamada igg_Item, que precisa ser aplicada a todas as células. Veja como isso é feito:

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

O mesmo padrão deve ser usado para aplicar classes CSS personalizadas.

1. Para qualquer classe CSS que tenha como alvo células no corpo, a classe CSS deve ser escrita da seguinte forma:

tbody.NewCellClass > tr > td
{
    /*styles*/
}

É aplicável à propriedade ItemCssClass do nível de controle e ao CellCssClass do comportamento de fixação de coluna.

2. Para quaisquer outras classes que tenham como alvo células específicas na grade, os seletores devem ser usados da seguinte forma:

tbody > tr > td.NewCellClass
{
    /*styles*/
}

É aplicável a estas propriedades:

• column level: CssClass
• activation behavior: ActiveCellCssClass
• selection behavior: SelectedCellCssClass

3. Para qualquer classe CSS direcionada a uma linha, a classe CSS deve ser escrita da seguinte forma:

tbody > tr.NewRowCssClass > td
{
    /*styles*/
}

É aplicável ao seguinte:

• control level:   AltItemCssClass
• activation behavior: ActiveRowCssClass

O código a seguir mostra como aplicar estilos diferentes às células da grade.

<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:

• As classes css com seletores estão sempre tendo prioridade e, se os seletores forem omitidos nas classes personalizadas, o estilo pode parecer diferente do esperado.
• Um efeito colateral potencial dos seletores css pode ser que esses estilos serão aplicados a TODOS os elementos td no corpo (não apenas os elementos td de primeiro nível como na notação de colchetes angulares), incluindo aqueles em modelos de célula, portanto, trabalhar com os seletores precisa ser feito com cuidado.
• O Internet Explorer 6 não oferece suporte a seletores com formato de colchete angular ('>').  Para aplicativos direcionados ao IE6, o colchete angular deve ser omitido. Exemplo:

tbody tr.NewRowCssClass td

{
    /*styles*/
}