Resumos da grade Blazor

O recurso Ignite UI for Blazor Summaries no Blazor Grid funciona em um nível por coluna como rodapé de grupo. Os resumos Blazor IgbGrid são um recurso poderoso que permite ao usuário ver informações de 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 IgbGrid.

Blazor 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

Os resumos IgbGrid também podem ser habilitados em um nível por coluna no Ignite UI for Blazor, o que significa que você pode ativá-lo apenas para colunas que você precisa. Os resumos IgbGrid fornecem 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.

Os resumos IgbGrid são habilitados por coluna ao definir a propriedade HasSummary como true. Também é importante ter em mente que os resumos para cada coluna são resolvidos de acordo com o tipo de dados da coluna. No IgbGrid, o tipo de dados da coluna padrão é string, então se você quiser resumos específicos number ou date você deve especificar a propriedade DataType como number ou date. Observe que os valores do resumo serão exibidos localizados, de acordo com o grid Locale e o column PipeArgs.

<IgbGrid>
        <IgbColumn Field="EmployeeID" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        <IgbColumn Field="FirstName" HasSummary="true"></IgbColumn>
        <IgbColumn Field="LastName" HasSummary="true"></IgbColumn>
        <IgbColumn Field="Title" HasSummary="true"></IgbColumn>
</IgbGrid>

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

 <IgbGrid @ref=grid Id="grid" AutoGenerate="false">
        <IgbColumn Field="EmployeeID" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
        <IgbColumn Field="FirstName" Sortable="true" HasSummary="true"></IgbColumn>
        <IgbColumn Field="LastName" Sortable="false" DisablePinning="true" DisableHiding="true" HasSummary="true"></IgbColumn>
        <IgbColumn Field="Title" Sortable="true" DisablePinning="false" DisableHiding="true"></IgbColumn>
</IgbGrid>

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

Custom 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 Grid needs the Operate method to always return an array of IgbSummaryResult with the proper length even when the data is empty.

<IgbGrid 
        AutoGenerate="true"
        Name="grid"
        @ref="grid"
        Data="NwindData"
        PrimaryKey="ProductID"
        ColumnInitScript="WebGridCustomSummary">
</IgbGrid>

// In Javascript
igRegisterScript("WebGridCustomSummary", (event) => {
    if (event.detail.field === "UnitsInStock") {
        event.detail.summaries = WebGridDiscontinuedSummary;
    }
}, false);

Custom summaries, which access all data

Agora você pode acessar todos os dados do Grid 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

The DisabledSummaries property provides precise per-column control over the Blazor Grid summary feature. This property enables users to customize the summaries displayed for each column in the IgbGrid, ensuring that only the most relevant and meaningful data is shown. For example, you can exclude specific summary types, such as ['count', 'min', 'max'] by specifying their summary keys in an array.

This property can also be modified dynamically at runtime through code, providing flexibility to adapt the IgbGrid's summaries to changing application states or user actions.

The following examples illustrate how to use the DisabledSummaries property to manage summaries for different columns and exclude specific default and custom summary types in the Blazor Grid:

<!-- 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']" />

For UnitPrice, default summaries like count, sum, and average are disabled, leaving others like min and max active.

For UnitsInStock, custom summaries such as discontinued and totalDiscontinued are excluded using the DisabledSummaries property.

At runtime, summaries can also be dynamically disabled using the DisabledSummaries property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes.

Summaries with Group By

Quando você agrupou por colunas, o IgbGrid permite que você altere a posição do resumo e o modo de cálculo usando as propriedades SummaryCalculationMode e SummaryPosition. Junto com essas duas propriedades, o IgbGrid expõe uma propriedade ShowSummaryOnCollapse que permite que você determine se a linha do resumo permanece visível quando a linha do grupo à qual se refere é recolhida.

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

RootLevelOnly- Os resumos são calculados apenas para o 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 dos filhos do grupo por linha.
Bottom- A linha de resumo aparece depois do grupo por linha filhos. Este é o valor padrão.

A propriedade ShowSummaryOnCollapse é booleana. Seu valor padrão é definido como false, o que significa que a linha de resumo ficaria oculta quando a linha de grupo fosse recolhida. Se a propriedade for definida como true , a linha de resumo permanecerá visível quando a linha de grupo 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 IgbGrid.

Demo

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:

<IgbGrid class="grid"></IgbGrid>

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.

Resumos da grade Blazor

Blazor Grid Summaries Overview Example

Custom Grid Summaries

Custom summaries, which access all data

Summary Template

Disabled Summaries

Summaries with Group By

Demo

Keyboard Navigation

Styling

Demo

API References

Additional Resources