Blazor Hierarchical Grid Summaries

O recurso Resumos Ignite UI for Blazor em Blazor Grade Hierárquica funciona em um nível por coluna como rodapé de grupo. Blazor resumos do HierarchicalGrid é 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 IgbHierarchicalGrid.

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

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

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

<IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID">
        <IgbColumn Field="Artist" HasSummary="true"></IgbColumn>
        <IgbColumn Field="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
        <IgbColumn Field="Debut" HasSummary="true"></IgbColumn>
        <IgbColumn Field="GrammyNominations" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        <IgbColumn Field="GrammyAwards" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        <IgbRowIsland ChildDataKey="Albums" AutoGenerate="false">
            <IgbColumn Field="Album" DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumn Field="LaunchDate" DataType="GridColumnDataType.Date"></IgbColumn>
            <IgbColumn Field="BillboardReview" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
            <IgbColumn Field="USBillboard200" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        </IgbRowIsland>
</IgbHierarchicalGrid>

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

<IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID">
    <IgbColumn Field="Artist" HasSummary="true"></IgbColumn>
    <IgbColumn Field="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
    <IgbColumn Field="Debut" HasSummary="true"></IgbColumn>
    <IgbColumn Field="GrammyNominations" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
    <IgbColumn Field="GrammyAwards" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
</IgbHierarchicalGrid>

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

Custom Hierarchical 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 WebGridDiscontinuedSummary {
    operate(data, allData, fieldName) {
        const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]);
        const result = [];
        result.push({
            key: 'products',
            label: 'Products',
            summaryResult: data.length
        });
        result.push({
            key: 'total',
            label: 'Total Items',
            summaryResult: data.length ? data.reduce((a, b) => +a + +b) : 0
        });
        result.push({
            key: 'discontinued',
            label: 'Discontinued Products',
            summaryResult: allData.map(r => r['Discontinued']).filter((rec) => rec).length
        });
        result.push({
            key: 'totalDiscontinued',
            label: 'Total Discontinued Items',
            summaryResult: discontinuedData.length ? discontinuedData.reduce((a, b) => +a + +b) : 0
        });
        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 Hierarchical Grid needs the Operate method to always return an array of IgbSummaryResult with the proper length even when the data is empty.

<IgbHierarchicalGrid 
        AutoGenerate="true"
        Name="hierarchicalGrid"
        @ref="hierarchicalGrid"
        Data="SingersData"
        PrimaryKey="ID"
        ColumnInitScript="WebHierarchicalGridCustomSummary">
</IgbHierarchicalGrid>

// In Javascript
igRegisterScript("WebHierarchicalGridCustomSummary", (event) => {
    if (event.detail.field === "GrammyAwards") {
        event.detail.summaries = WebHierarchicalGridSummary;
    }
}, false);

Custom summaries, which access all data

Agora você pode acessar todos os dados da Grade Hierárquica 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 WebGridDiscontinuedSummary {
    operate(data, allData, fieldName) {
        const discontinuedData = allData.filter((rec) => rec['Discontinued']).map(r => r[fieldName]);
        result.push({
            key: 'totalDiscontinued',
            label: 'Total Discontinued Items',
            summaryResult: discontinuedData.length ? discontinuedData.reduce((a, b) => +a + +b) : 0
        });
        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 Hierárquica Blazor. Essa propriedade permite que os usuários personalizem os resumos exibidos para cada coluna no HierarchicalGrid, 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 do código, fornecendo flexibilidade para adaptar os resumos do HierarchicalGrid à 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 Hierárquica 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.

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:

<IgbHierarchicalGrid id="hierarchicalGrid"></IgbHierarchicalGrid>

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

#hierarchicalGrid {
    --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 Hierarchical Grid Summaries