Blazor Tree Grid Summaries

O recurso Ignite UI for Blazor Summaries em Blazor Tree Grid funciona em nível por coluna como rodapé de grupo. Blazor resumos TreeGrid é um recurso poderoso que permite ao usuário ver informações de coluna em um contêiner separado com um conjunto pré-definido de itens padrão de resumo, dependendo do tipo de dados dentro da coluna ou implementando um modelo personalizado naIgbTreeGrid.

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

IgbTreeGridResumos também podem ser ativados em nível por coluna em Ignite UI for Blazor, o que significa que você só pode ativar para colunas que precisar.IgbTreeGrid Resumos te dão um conjunto pré-definido de resumos padrão, dependendo do tipo de dado na coluna, para que você possa economizar tempo:

Parastring eboolean DataType, a seguinte função está disponível:

Contar

Paranumber ecurrencypercent tipos de dados, as seguintes funções estão disponíveis:

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

Para odate tipo de dado, 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.

IgbTreeGridResumos são ativados por coluna ao definirHasSummary a propriedade como True. Também é importante lembrar que os resumos de cada coluna são resolvidos de acordo com o tipo de dado da coluna. NaIgbTreeGrid coluna padrão, o tipo de dado éstring, então se você quisernumber resumosdate específicos, deve especificar aDataType propriedade comonumber ou.date Note que os valores resumidos serão exibidos localizados, de acordo com a gradeLocale e a colunaPipeArgs.

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

Outra forma de ativar/desativar resumos para uma coluna específica ou uma lista de colunas é usar o métodoEnableSummaries público/DisableSummaries of.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 oOperate método, então você pode escolher obter todos os resumos padrão e modificar o resultado, ou calcular resultados totalmente novos.

O método retorna uma lista deIgbSummaryResult.

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 personalizado da coluna. Dois parâmetros opcionais adicionais são introduzidos no método SummaryOperandOperate. Como você pode ver no trecho de código abaixo, o método de operação possui os seguintes três parâmetros:

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

SummaryTemplateMira 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 do resumo é calculada por design dependendo da coluna com o maior número de resumos e da--ig-size grade. Use aSummaryRowHeight propriedade de entrada para sobrescrever o valor padrão. Como argumento, ele espera um valor numérico, e definir um valor falso aciona o comportamento padrão de dimensionamento do rodapé da grade.

Disabled Summaries

ADisabledSummaries propriedade oferece controle preciso por coluna sobre o recurso resumo Blazor Tree Grid. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna do TreeGrid, garantindo que apenas os dados mais relevantes e significativos sejam mostrados. Por exemplo, você pode excluir tipos específicos de resumo, como ['contagem', 'mínimo', 'máximo'] especificando suas chaves de resumo em um array.

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 aDisabledSummaries propriedade para gerenciar resumos de diferentes colunas e excluir tipos específicos de resumo padrão e personalizados 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']" />

PoisUnitPrice, resumos padrão comocount,sum, eaverage estão desativados, deixando outros comomin emax ativos.

ParaUnitsInStock resumos personalizados comodiscontinued etotalDiscontinued são excluídos usando aDisabledSummaries propriedade.

Em tempo de execução, resumos também podem ser desativados dinamicamente usando aDisabledSummaries propriedade. Por exemplo, você pode definir ou atualizar a propriedade em colunas específicas programaticamente para adaptar os resumos exibidos com base em ações do usuário ou mudanças no estado da aplicação.

Child Summaries

OIgbTreeGrid suporte resumos separados para os nós raiz e para cada nível de nó filho aninhado. Quais resumos são mostrados pode ser configurado usando aSummaryCalculationMode propriedade. Os resumos em nível filho podem ser mostrados antes ou depois dos nós filhos usando aSummaryPosition propriedade. Junto com essas duas propriedades, osIgbTreeGrid exposes eShowSummaryOnCollapse a propriedade que permite determinar se a linha resumida permanece visível quando o nó pai ao qual se refere é colapsado.

Os valores disponíveis doSummaryCalculationMode imóvel são:

RootLevelOnly- 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 tanto para níveis raiz quanto para filhos. Esse é o valor padrão.

Os valores disponíveis doSummaryPosition imóvel 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 filhas. Esse é o valor padrão.

AShowSummaryOnCollapse propriedade é booleana. Seu valor padrão é definido como falso, o que significa que a linha de resumo ficaria oculta quando a linha pai for colapsada. Se a propriedade for definida como verdadeira, a linha de resumo permanece visível quando a linha pai é colapsada.

[!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