Blazor Tree Grid Summaries

O recurso Resumos Ignite UI for Blazor em Blazor Grade de Árvore funciona em um nível por coluna como rodapé de grupo. Blazor resumos do TreeGrid é um recurso poderoso que permite ao usuário ver as informações da coluna em um contêiner separado com um conjunto predefinido de itens de resumo padrão, dependendo do tipo de dados dentro da coluna ou implementando um modelo personalizado no IgbTreeGrid.

Blazor Tree Grid Summaries Overview Example

[!Note] The summary of the column is a function of all column values, unless filtering is applied, then the summary of the column will be function of the filtered result values

IgbTreeGrid Os resumos também podem ser ativados em um nível por coluna no Ignite UI for Blazor, o que significa que você pode ativá-lo apenas para as colunas necessárias. IgbTreeGrid resumos fornece um conjunto predefinido de resumos padrão, dependendo do tipo de dados na coluna, para que você possa economizar algum tempo:

Para string e boolean DataType, a seguinte função está disponível:

Contar

Para number e currency percent tipos de dados, as seguintes funções estão disponíveis:

Contar
Mínimo
Máx.
Média
Soma

Para date o tipo de dados, as seguintes funções estão disponíveis:

Contar
Mais antigo
Mais recente

Todos os tipos de dados de coluna disponíveis podem ser encontrados no tópico oficial Tipos de coluna.

IgbTreeGrid Os resumos são habilitados por coluna definindo HasSummary a propriedade como true. Também é importante ter em mente que os resumos de cada coluna são resolvidos de acordo com o tipo de dados da coluna. IgbTreeGrid No tipo de dados da coluna padrão é string, portanto, se você quiser number resumos date específicos, especifique a DataType propriedade como number ou date. Observe que os valores resumidos serão exibidos localizados, de acordo com a grade Locale e a coluna PipeArgs.

<IgbTreeGrid>
        <IgbColumn Field="ID" Header="Order ID"></IgbColumn>
        <IgbColumn Field="Name" Header="Order Product" HasSummary="true"></IgbColumn>
        <IgbColumn Field="Units" Header="Units" HasSummary="true"></IgbColumn>
</IgbTreeGrid>

A outra maneira de ativar/desativar resumos para uma coluna específica ou uma lista de colunas é usar o método EnableSummaries público/ DisableSummaries do IgbTreeGrid.

<IgbTreeGrid AutoGenerate="false" Data="OrdersTreeData" Name="treeGrid" @ref="treeGridRef" Id="treeGrid" PrimaryKey="ID">
    <IgbColumn Field="ID" Header="Order ID"></IgbColumn>
    <IgbColumn Field="Name" Header="Order Product" HasSummary="true"></IgbColumn>
    <IgbColumn Field="Units" Header="Units" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
</IgbTreeGrid>

@code {
    public async void DisableSummaries()
    {
        object[] disabledSummaries = { "Units" };
        await this.treeGrid.DisableSummariesAsync(disabledSummaries);
    }
}

Custom Tree Grid Summaries

Se essas funções não atenderem aos seus requisitos, você pode fornecer um resumo personalizado para as colunas específicas.


//In JavaScript
class PtoSummary {
    operate(data, allData, fieldName) {
        const result = [];
        result.push({
            key: 'totalOnPTO',
            label: 'Employees On PTO',
            summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
        });
        result.push({
            key: 'devs',
            label: 'Developers',
            summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Developer') && rec['OnPTO']).map(r => r[fieldName]))
        });
        result.push({
            key: 'tl',
            label: 'Team Leads',
            summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Team Lead') && rec['OnPTO']).map(r => r[fieldName]))
        });
        result.push({
            key: 'managers',
            label: 'Managers/Directors',
            summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('Manager') || rec[fieldName].includes('Director')) && rec['OnPTO']).map(r => r[fieldName]))
        });
        result.push({
            key: 'ceo',
            label: 'CEO/President',
            summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('CEO') || rec[fieldName].includes('President')) && rec['OnPTO']).map(r => r[fieldName]))
        });
        return result;
    }
}

Como visto nos exemplos, as classes base expõem o método Operate, então você pode escolher obter todos os resumos padrão e modificar o resultado, ou calcular resultados de resumo inteiramente novos.

O método retorna uma lista de IgbSummaryResult.

e tomar parâmetros opcionais para calcular os resumos. Consulte a seção Resumos personalizados, que acessam todos os dados abaixo.

[!Note] In order to calculate the summary row height properly, the Tree Grid needs the Operate method to always return an array of IgbSummaryResult with the proper length even when the data is empty.

<IgbTreeGrid 
        AutoGenerate="true"
        Name="treeGrid"
        @ref="treeGrid"
        Data="EmployeesFlatData"
        PrimaryKey="ID"
        ColumnInitScript="WebTreeGridCustomSummary">
</IgbTreeGrid>

// In Javascript
igRegisterScript("WebTreeGridCustomSummary", (event) => {
    if (event.detail.field === "Title") {
        event.detail.summaries = PtoSummary;
    }
}, false);

Custom summaries, which access all data

Agora você pode acessar todos os dados da Grade de Árvore dentro do resumo da coluna personalizada. Dois parâmetros opcionais adicionais são introduzidos no método SummaryOperand Operate. Como você pode ver no trecho de código abaixo, o método operate tem os três parâmetros a seguir:

columnData - fornece uma matriz que contém os valores apenas para a coluna atual
allGridData - fornece a fonte de dados da grade completa
fieldName - campo da coluna atual

class PtoSummary {
    operate(data, allData, fieldName) {
        const result = [];
        result.push({
            key: 'totalOnPTO',
            label: 'Employees On PTO',
            summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
        });
        return result;
    }
}

Summary Template

Summary tem como alvo o resumo da coluna, fornecendo como contexto os resultados do resumo da coluna.

<IgbColumn HasSummary="true" SummaryTemplateScript="SummaryTemplate">
</IgbColumn>

igRegisterScript("SummaryTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div>
    <span> ${ctx.implicit[0].label} - ${ctx.implicit[0].summaryResult} </span>
</div>`
}, false);

Quando um resumo padrão é definido, a altura da área de resumo é calculada por design dependendo da coluna com o maior número de resumos e do--ig-size da grade. Use a propriedade de entrada SummaryRowHeight para substituir o valor padrão. Como argumento, ele espera um valor numérico, e definir um valor falso acionará o comportamento de dimensionamento padrão do rodapé da grade.

Disabled Summaries

A DisabledSummaries propriedade fornece controle preciso por coluna sobre o recurso de resumo da Grade de Árvore Blazor. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna no TreeGrid, garantindo que apenas os dados mais relevantes e significativos sejam mostrados. Por exemplo, você pode excluir tipos de resumo específicos, como ['count', 'min', 'max'] especificar suas chaves de resumo em uma matriz.

Essa propriedade também pode ser modificada dinamicamente em tempo de execução por meio de código, fornecendo flexibilidade para adaptar os resumos do TreeGrid à alteração dos estados do aplicativo ou das ações do usuário.

Os exemplos a seguir ilustram como usar a DisabledSummaries propriedade para gerenciar resumos para colunas diferentes e excluir tipos de resumo padrão e personalizados específicos na Grade de Árvore Blazor:

<!-- Disable default summaries -->
<IgbColumn 
    Field="UnitPrice" 
    Header="Unit Price" 
    DataType="GridColumnDataType.Number"
    HasSummary="true" 
    DisabledSummaries="['count', 'sum', 'average']" />

<!-- Disable custom summaries -->
<IgbColumn 
    Field="UnitsInStock" 
    Header="Units In Stock" 
    DataType="GridColumnDataType.Number"
    HasSummary="true" 
    Summaries="discontinuedSummary" 
    DisabledSummaries="['discontinued', 'totalDiscontinued']" />

Pois UnitPrice, resumos padrão como count, sum e average são desativados, deixando outros como min e max ativos.

Para UnitsInStock, resumos personalizados, como discontinued e totalDiscontinued são excluídos usando a DisabledSummaries propriedade.

Em tempo de execução, os resumos também podem ser desabilitados dinamicamente usando a DisabledSummaries propriedade. Por exemplo, você pode definir ou atualizar a propriedade em colunas específicas programaticamente para adaptar os resumos exibidos com base nas ações do usuário ou nas alterações de estado do aplicativo.

Child Summaries

O IgbTreeGrid suporta resumos separados para os nós raiz e para cada nível de nó filho aninhado. Quais resumos são mostrados são configuráveis usando a SummaryCalculationMode propriedade. Os resumos de nível filho podem ser mostrados antes ou depois dos nós filho usando a SummaryPosition propriedade. Junto com essas duas propriedades, a IgbTreeGrid propriedade exposes e ShowSummaryOnCollapse que permite determinar se a linha de resumo permanece visível quando o nó pai ao qual se refere é recolhido.

Os valores disponíveis da propriedade SummaryCalculationMode são:

RootLevelOnly- Os resumos são calculados apenas para os nós de nível raiz.
ChildLevelsOnly- Os resumos são calculados apenas para os níveis filhos.
RootAndChildLevels- Resumos são calculados para níveis raiz e filho. Este é o valor padrão.

Os valores disponíveis da propriedade SummaryPosition são:

Top- A linha de resumo aparece antes da lista de linhas filhas.
Bottom- A linha de resumo aparece após a lista de linhas secundárias. Esse é o valor padrão.

A ShowSummaryOnCollapse propriedade é booleana. Seu valor padrão é definido como false, o que significa que a linha de resumo ficaria oculta quando a linha pai fosse recolhida. Se a propriedade for definida como true, a linha de resumo permanecerá visível quando a linha pai for recolhida.

[!Note] The SummaryPosition property applies only for the child level summaries. The root level summaries appear always fixed at the bottom of the IgbTreeGrid.

As linhas de resumo podem ser navegadas com as seguintes interações de teclado:

PARA CIMA- navega uma célula para cima.
PARA BAIXO- navega uma célula para baixo.
ESQUERDA- navega uma célula para a esquerda.
DIREITA- navega uma célula para a direita.
CTRL + ESQUERDA ou HOME- navega para a célula mais à esquerda.
CTRL + DIREITA ou END- navega para a célula mais à direita.

Styling

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

<IgbTreeGrid class="grid"></IgbTreeGrid>

Em seguida, defina as propriedades CSS relacionadas para essa classe:

.grid {
    --ig-grid-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}

Demo

API References

SummaryOperand
NumberSummaryOperand
DateSummaryOperand
IgbColumnGroup
IgbColumn

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Blazor Tree Grid Summaries