Estilo condicional de grade Web Components

    O recurso Ignite UI for Web Components Condicional Styling no Web Components Grid permite estilização personalizada em nível de fileira ou célula. AIgcGridComponent funcionalidade de Estilização Condicional é usada para enfatizar visualmente ou destacar dados que atendem a certos critérios, facilitando para os usuários identificarem informações ou tendências importantes dentro da grade.

    Grid Conditional Row Styling

    OIgcGridComponent componente em Ignite UI for Web Components oferece duas formas de estilizar condicionalmente as linhas com base em regras personalizadas.

    Mais adiante neste tópico, abordaremos os dois com mais detalhes.

    Using Row Classes

    Você pode estilizar condicionalmente asIgcGridComponent linhas definindo arowClasses entrada e definir regras personalizadas.

    <igc-grid id="grid" height="600px" width="100%">
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    grid.rowClasses = this.rowClasses;
}

    ArowClasses entrada aceita um objeto literal, contendo pares-chave-valor, onde a chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou booleano.

    public rowClasses = {
    activeRow: (row: IgcRowType) => row.index === 0
}

    .activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}

    Demo

    Using Row Styles

    OIgcGridComponent controle expõe arowStyles propriedade que permite o estilo condicional das linhas de dados. De forma semelhante,rowClasses aceita um literal de objeto onde as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar um penteado normal (sem nenhuma condição).

    A assinatura de callback para ambosrowStyles erowClasses é:

    (row: IgcRowType) => boolean

    Vamos definir nossos estilos:

    public rowStyles = {
    'background': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
    'border': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
    'border-color': (row: IgcRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
};

    <igc-grid id="grid1" height="500px" width="100%"
        auto-generate="false" allow-filtering="true">
</igc-grid>

    constructor() {
    var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
    grid1.rowStyles = this.rowStyles;
}

    Demo

    Grid Conditional Cell Styling

    Visão geral

    OIgcGridComponent componente em Ignite UI for Web Components oferece duas formas de estilizar condicionalmente as células com base em regras personalizadas.

    • Definindo aIgcColumnComponent entradacellClasses para um literal de objeto contendo pares-chave-valor. A chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou booleano. O resultado é um estilo material conveniente da célula.

    Using Cell Classes

    Você pode estilizar condicionalmente asIgcGridComponent células definindo oIgcColumnComponent cellClasses Insira e defina regras personalizadas.

    <igc-column id="beatsPerMin" field="BeatsPerMinute" data-type="Number"></igc-column>

    constructor() {
    var beatsPerMin = this.beatsPerMin = document.getElementById('beatsPerMin') as IgcColumnComponent;
    beatsPerMin.cellClasses = this.beatsPerMinuteClasses;
}

    AcellClasses entrada aceita um objeto literal, contendo pares-chave-valor, onde a chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou booleano.

    
private upFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] > 95;
}

private downFontCondition = (rowData: any, columnKey: any): boolean => {
    return rowData[columnKey] <= 95;
}

public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};

    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

    Demo

    • Usando aIgcColumnComponent entradacellStyles que aceita um objeto literal onde as chaves são propriedades de estilo e os valores são expressões para avaliação.

    A assinatura de callback para amboscellStyles ecellClasses agora foi alterada para:

    (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean

    Using Cell Styles

    Colunas expõem acellStyles propriedade que permite o estilo condicional das células da coluna. De forma semelhante,cellClasses aceita um literal de objeto onde as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar o penteado normal com facilidade (sem nenhuma condição).

    Vamos definir nossos estilos:

    public webGridCellStylesHandler = {
    background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
    color: (rowData, columnKey, cellValue, rowIndex) => {
        if (columnKey === "Position") {
            switch (cellValue) {
                case "up": return "#28a745";
                case "down": return "#dc3545";
                case "current": return "#17a2b8"
            }
        }
    }
}

    <igc-column id="col1">
</igc-column>

    constructor() {
    var col1 = document.getElementById('col1') as IgcColumnComponent;
    col1.cellStyles = this.webGridCellStylesHandler;
}

    Demo

    Known issues and limitations

    • Se houver células associadas à mesma condição (de colunas diferentes) e uma célula for atualizada, as outras células não serão atualizadas com base no novo valor, se a condição for atendida.

    Uma verificação deve ser realizada para aplicar as alterações ao restante das células. O exemplo abaixo mostra como fazer isso.

    public backgroundClasses = {
    myBackground: (rowData: any, columnKey: string) => {
        return rowData.Col2 < 10;
    }
};

public editDone(evt) {
    this.Col1.cellClasses = {...this.backgroundClasses};
}

    <igc-grid id="grid1" height="500px" width="100%" >
  <igc-column id="Col1" field="Col1" data-type="number"></igx-column>
  <igc-column id="Col2" field="Col2" data-type="number" editable="true"></igx-column>
  <igc-column id="Col3" field="Col3" header="Col3" data-type="string"></igx-column>
<igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid1') as IgcGrid;
    var Col1 = this.Col1 = document.getElementById('Col1') as IgcColumnComponent;
    var Col2 = this.Col2 = document.getElementById('Col2') as IgcColumnComponent;
    var Col3 = this.Col3 = document.getElementById('Col3') as IgcColumnComponent;
    grid.data = this.data;
    grid.onCellEdit = this.editDone;
    Col1.cellClasses = this.backgroundClasses;
    Col2.cellClasses = this.backgroundClasses;
    Col3.cellClasses = this.backgroundClasses;
}

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.