Estilo condicional de grade Web Components

    O recurso Ignite UI for Web Components Estilo condicional em Web Components Grid permite o estilo personalizado em um nível de linha ou célula. A IgcGridComponent funcionalidade Estilo condicional é usada para enfatizar ou realçar visualmente os dados que atendem a determinados critérios, tornando mais fácil para os usuários identificar informações ou tendências importantes na grade.

    Grid Conditional Row Styling

    O IgcGridComponent componente no Ignite UI for Web Components fornece duas maneiras de estilizar condicionalmente linhas com base em regras personalizadas.

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

    Using Row Classes

    Você pode estilizar condicionalmente as IgcGridComponent linhas definindo a rowClasses 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;
}

    A rowClasses entrada aceita um literal de objeto, contendo pares chave-valor, em que a chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada 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

    O IgcGridComponent controle expõe a propriedade que permite o rowStyles estilo condicional das linhas de dados. Semelhante a rowClasses ele, aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar um estilo regular (sem quaisquer condições).

    The callback signature for both rowStyles and rowClasses is:

    (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

    O IgcGridComponent componente em Ignite UI for Web Components fornece duas maneiras de estilizar condicionalmente de células com base em regras personalizadas.

    • Definindo a IgcColumnComponent entrada cellClasses para um literal de objeto contendo pares de valores-chave. A chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada que retorna um valor booleano ou booleano. O resultado é um estilo de material conveniente da célula.

    Using Cell Classes

    Você pode estilizar condicionalmente as IgcGridComponent células definindo o IgcColumnComponent 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;
}

    A cellClasses entrada aceita um literal de objeto, contendo pares chave-valor, em que a chave é o nome da classe CSS, enquanto o valor é uma função de retorno de chamada 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 a IgcColumnComponent entrada cellStyles que aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação.

    A assinatura de retorno de chamada para ambos cellStyles e cellClasses agora é alterada para:

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

    Using Cell Styles

    As colunas expõem a propriedade que permite o cellStyles estilo condicional das células da coluna. Semelhante a cellClasses ele, aceita um literal de objeto em que as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar o estilo regular com facilidade (sem quaisquer condições).

    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.