Estilo condicional da grade de árvore Angular

Se você precisar fornecer qualquer estilo personalizado no componente IgxTreeGrid, poderá fazê-lo no nível de linha ou célula.

Tree Grid Conditional Row Styling

O componente IgxTreeGrid no Ignite UI for Angular fornece duas maneiras de estilo condicional de linhas com base em regras personalizadas.

• By setting rowClasses input on the IgxTreeGrid component;
• Ao definir rowStyles a entrada no componente IgxTreeGrid;

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

Using rowClasses

Você pode estilizar condicionalmente as linhas IgxTreeGrid definindo a rowClasses entrada e definindo regras personalizadas.

<!-- sample.component.html -->
<igx-tree-grid #treeGrid [data]="data" [height]="'600px'" [width]="'100%'" [rowClasses]="rowClasses">
    ...
</igx-tree-grid>

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.

// sample.component.ts

public rowClasses = {
  activeRow: this.activeRowCondition
};

public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.row === row.index;

// sample.component.scss

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

Note

Use::ng-deep ou ViewEncapsulation.None para forçar os estilos personalizados para baixo através do componente atual e seus filhos.

Demo

Using rowStyles

As colunas agora expõem 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).

A assinatura de retorno de chamada para ambos rowStyles e rowClasses é:

(row: RowType) => boolean

Vamos definir nossos estilos:

// component.ts
public background = (row: RowType) => row.data['Title'] === 'CEO' ? '#6c757d' :
    row.data['Title'].includes('President') ? '#adb5bd' :
    row.data['Title'].includes('Director') ?  '#ced4da' :
    row.data['Title'].includes('Manager') ? '#dee2e6' :
    row.data['Title'].includes('Lead') ? '#e9ecef' :
    row.data['Title'].includes('Senior') ? '#f8f9fa' : null;

public rowStyles = {
    background: this.background,
    'border-left': (row: RowType) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ?
        '2px solid' : null,
    'border-color': (row: RowType) => row.data['Title'] === 'CEO' ? '#495057' : null,
    color: (row: RowType) => row.data['Title'] === 'CEO' ? '#fff' : null
};

<!-- sample.component.html -->
<igx-tree-grid #treeGrid [data]="data" [moving]="true" primaryKey="ID" foreignKey="ParentID"
        width="100%" height="550px" [rowStyles]="rowStyles">
    ...
</igx-tree-grid>

Demo

Tree Grid Conditional Cell Styling

Visão geral

O componente IgxTreeGrid no Ignite UI for Angular fornece duas maneiras de estilizar condicionalmente células com base em regras personalizadas.

• Definindo a IgxColumnComponent 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.

// component.ts file
public beatsPerMinuteClasses = {
    downFont: this.downFontCondition,
    upFont: this.upFontCondition
};
...

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

// component.scss file
.upFont {
  color: red;
}

.downFont {
  color: green;
}

Using cellClasses

Você pode estilizar condicionalmente as células IgxTreeGrid definindo o IgxColumnComponent cellClasses insira e defina regras personalizadas.

<!-- sample.component.html -->
<igx-column field="UnitPrice" header="Unit Price" [dataType]="'currency'" [pipeArgs]="formatOptions" [cellClasses]="priceClasses"></igx-column>

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.

// sample.component.ts

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

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

public priceClasses = {
    downPrice: this.downPriceCondition,
    upPrice: this.upPriceCondition
};

// sample.component.scss

::ng-deep {
    .upPrice {
        color: red;
    }

    .downPrice {
        color: green;
    }
}

Note

Use::ng-deep ou ViewEncapsulation.None para forçar os estilos personalizados para baixo através do componente atual e seus filhos.

Demo

• Usando a IgxColumnComponent 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.

public styles = {
    'background': 'linear-gradient(180deg, #dd4c4c 0%, firebrick 100%)',
    'text-shadow': '1px 1px 2px rgba(25,25,25,.25)',
    'animation': '0.25s ease-in-out forwards alternate popin'
};

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

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

Using cellStyles

As colunas agora 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).

No exemplo acima, criamos:

• Dois estilos diferentes que serão aplicados com base no índice da coluna.
• Você também alterará o text color com base em linhas pares/ímpares.

A assinatura de retorno de chamada para ambos cellStyles é:

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

Vamos definir nossos estilos:

// component.ts
public oddColStyles = {
    background: 'linear-gradient(to right, #b993d6, #8ca6db)',
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'white' : 'gray',
    animation: '0.75s popin'
};

public evenColStyles = {
    background: 'linear-gradient(to right, #8ca6db, #b993d6)',
    color: (rowData, coljey, cellValue, rowIndex) => rowIndex % 2 === 0 ? 'gray' : 'white',
    animation: '0.75s popin'
};

Em ngOnInit adicionaremos a cellStyles configuração para cada coluna da coleção predefinida columns, que é usada para criar as colunas IgxTreeGrid dinamicamente.

// component.ts
public ngOnInit() {
    this.data = ORDERS_DATA;
     this.columns = [
        { field: 'ID' },
        { field: 'Name' },
        { field: 'UnitPrice' },
        { field: 'OrderDate' }
    ];

    this.applyCSS();
}

public applyCSS() {
    this.columns.forEach((column, index) => {
        column.cellStyles = (index % 2 === 0 ? this.evenColStyles : this.oddColStyles);
    });
}

public updateCSS(css: string) {
    this.oddColStyles = {...this.oddColStyles, ...JSON.parse(css)};
    this.evenColStyles = {...this.evenColStyles, ...JSON.parse(css)};
    this.applyCSS();
}

//component.html
<igx-tree-grid
    #grid1 [data]="data"
    primaryKey="ID" foreignKey="ParentID"
    height="350px">
    <igx-column *ngFor="let c of columns"
        [field]="c.field"
        [header]="c.header"
        [cellStyles]="c.cellStyles">
    </igx-column>
</igx-tree-grid>

Definir uma popin animação

// component.scss
@keyframes popin {
    0% {
        opacity: 0.1;
        transform: scale(.75, .75);
        filter: blur(3px) invert(1);
    }

    50% {
        opacity: .5;
        filter: blur(1px);
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
        filter: none;
    }
}

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 de pipe deve ser realizada para aplicar as alterações ao restante das células. O exemplo abaixo mostra como fazer isso com um spread operator(...) evento on onCellEdit. Isso copiará o objeto original com uma nova instância e levará o tubo puro a ser disparado.

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

editDone(evt) {
    this.backgroundClasses = {...this.backgroundClasses};
}

<igx-tree-grid #grid1 [data]="data" height="500px" width="100%" (onCellEdit)="editDone($event)">
  <igx-column field="Col1" dataType="number" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col2" dataType="number" [editable]="true" [cellClasses]="backgroundClasses"></igx-column>
  <igx-column field="Col3" header="Col3" dataType="string" [cellClasses]="backgroundClasses"></igx-column>
</igx-tree-grid>

API References

• IgxColumnComponent
• Componente IgxTreeGrid
• IgxTreeGridComponent Styles

Additional Resources

• Visão geral da grade de árvore
• Virtualização e desempenho
• Edição
• Paginação
• Filtragem
• Classificação
• Resumos
• Movimentação de Colunas
• Fixação de coluna
• Redimensionamento de colunas
• Ocultação de coluna
• Escolha
• Procurando
• Barra de ferramentas
• Cabeçalhos de várias colunas
• Tamanho

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub