Blazor Grid Grupo Por

    O comportamento Ignite UI for Blazor Group By no Blazor IgbGrid cria linhas de dados agrupadas com base nos valores da coluna. O Group By no IgbGrid permite visualizar os grupos em uma estrutura hierárquica. As linhas de dados agrupadas podem ser expandidas ou recolhidas e a ordem de agrupamento pode ser alterada por meio da UI ou API. Quando Row Selection está habilitado, um seletor de linha Group By é renderizado na área mais à esquerda da linha do grupo. Caso a propriedade RowSelection esteja definida como single, as caixas de seleção são desabilitadas e servem apenas como uma indicação para o grupo onde a seleção é colocada. Se a propriedade RowSelection estiver definida como multiple, clicar no seletor de linha Group By seleciona todos os registros pertencentes a esse grupo.

    Blazor Grid Group By Example

    Este exemplo apresenta os recursos de agrupamento de uma grande quantidade de dados. Arrastar os cabeçalhos de coluna para o topo (área de agrupamento) permite que os usuários vejam os dados da coluna selecionada em uma estrutura hierárquica. Eles podem agrupar por em vários campos arrastando mais cabeçalhos de coluna para o topo. Essas opções de agrupamento são úteis quando você tem tabelas com várias linhas e colunas nas quais os usuários desejam apresentar os dados de uma forma muito mais rápida e visualmente aceitável.

    Initial Grouping State

    É possível definir o agrupamento inicial da grade atribuindo uma matriz de expressões à propriedade GroupingExpressions da grade.

    <IgbGrid AutoGenerate="true" Data="InvoicesData" @ref="grid" Id="grid" GroupingExpressions="GroupingExpression1"></IgbGrid>

@code {
    public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
    {
        new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
        new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
    };
}

    Expressões de agrupamento implementam a interface ISortingExpression.

    Group By API

    Grouping API

    O agrupamento está disponível por meio da IU e por meio de uma API robusta exposta pelo componente grid. Os desenvolvedores podem permitir que os usuários finais agrupem os dados da grade por determinadas colunas, definindo a propriedade Groupable de cada coluna como true.

    <IgbGrid AutoGenerate="false" Data="InvoicesData" @ref="grid" Id="grid" GroupingExpressions="GroupingExpression1" GroupRowTemplateScript="WebGridGroupByRowTemplate">
    <IgbColumn Field="OrderID" Hidden="true"></IgbColumn>
    <IgbColumn Field="ShipCountry" Header="Ship Country" Width="200px" Groupable="true"></IgbColumn>
    <IgbColumn Field="OrderDate" Header="Order Date" DataType="GridColumnDataType.Date" Width="200px" Groupable="true"></IgbColumn>
    <IgbColumn Field="PostalCode" Header="Postal Code" Width="200px" Groupable="true"></IgbColumn>
    <IgbColumn Field="Discontinued" Width="200px" DataType="GridColumnDataType.Boolean" Groupable="true" BodyTemplateScript="WebGridBooleanCellTemplate" Name="column1" @ref="column1"></IgbColumn>
    <IgbColumn Field="ShipName" Header="Ship Name" Width="200px" Groupable="true"></IgbColumn>
    <IgbColumn Field="ShipCity" Header="Ship City" Width="200px" Groupable="true"></IgbColumn>
    <IgbColumn Field="ShipperName" Header="Shipper Name"Width="200px"Groupable="true"></IgbColumn>
    <IgbColumn Field="Salesperson" Header="Sales Person" Width="200px" Groupable="true"></IgbColumn>
    <IgbColumn Field="UnitPrice" Header="Unit Price" Width="200px" Groupable="true"></IgbColumn>
    <IgbColumn Field="Quantity" Width="200px" Groupable="true"></IgbColumn>
</IgbGrid>

    Durante o tempo de execução, as expressões são obteníveis e definíveis a partir da propriedade groupingExpressions. Se você precisar adicionar ou alterar uma expressão existente, você também pode usar o método GroupBy com uma única expressão ou uma matriz de expressões.

    @code {
    public IgbGrid grid;

    public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
    {
        new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
        new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
    };


    private void GroupGrid()
    {
        this.grid.GroupBy(GroupingExpression1);
    }
}

    Expand/Collapse API

    Além de agrupar expressões, você também pode controlar os estados de expansão para linhas de grupo. Eles são armazenados em uma propriedade separada do componente IgbGrid​ ​GroupingExpansionState que é uma coleção de IgbGroupByExpandState. Cada estado de expansão é definido exclusivamente pelo nome do campo para o qual é criado e o valor que representa para cada nível de agrupamento, ou seja, o identificador é uma matriz de hierarquia de IgbGroupByKey.

    Assim como com GroupingExpressions, definir uma lista de IgbGroupByExpandState diretamente para GroupingExpansionState mudará a expansão de acordo. Além disso, IgbGrid expõe um método toggleGroup que alterna um grupo pela instância do registro de grupo ou por meio da propriedade expanded da linha.

    <IgbGrid AutoGenerate="true" Data="InvoicesData" GroupingExpressions="GroupingExpression1" GroupingExpansionState=ExpansionState @ref="grid" Id="grid">
</IgbGrid>

@code {
    public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
    {
        new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
        new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
    };
    public IgbGroupByExpandState[] state = new IgbGroupByExpandState[1]
    {
        new IgbGroupByExpandState(){ Hierarchy = new IgbGroupByKey[1]{ new IgbGroupByKey() { FieldName="ShipCountry", Value = "USA" } },  Expanded = false }
    };
}

    Os grupos podem ser criados expandidos (padrão) ou recolhidos e os estados de expansão geralmente conteriam apenas o estado oposto ao comportamento padrão. Você pode controlar se os grupos devem ser criados expandidos ou não por meio da propriedade GroupsExpanded.

    Select/Deselect All Rows in a Group API

    Selecionar/desmarcar todas as linhas em um grupo está disponível por meio dos métodos de API SelectRowsInGroup e DeselectRowsInGroup.

    O snippet de código abaixo pode ser usado para selecionar todas as linhas dentro de um grupo usando o método SelectRowsInGroup da instância de registro de grupo. Além disso, o segundo parâmetro desse método é uma propriedade booleana por meio da qual você pode escolher se a seleção de linha anterior será apagada ou não. A seleção anterior é preservada por padrão.

    var row = await this.grid.GetRowByIndexAsync(0);
this.grid.SelectRowsInGroup(row.GroupRow, true);

    Se você precisar desmarcar todas as linhas dentro de um grupo programaticamente, poderá usar o método DeselectRowsInGroup.

    var row = await this.grid.GetRowByIndexAsync(0);
this.grid.DeselectRowsInGroup(row.GroupRow);

    Templating

    Group Row Templates

    A linha do grupo, exceto para a UI expandir/recolher, é totalmente modelável. Por padrão, ela renderiza um ícone de agrupamento e exibe o nome do campo e o valor que ele representa. O contexto para renderizar o modelo é do tipo IgbGroupByRecord.

    Como exemplo, o modelo a seguir tornaria o resumo das linhas do grupo mais detalhado:

    <IgbGrid AutoGenerate="true" Data="InvoicesData" @ref="grid" Id="grid" GroupRowTemplateScript="WebGridGroupByRowTemplate"></IgbGrid>


//In JavaScript:
igRegisterScript("WebGridGroupByRowTemplate", (ctx) => {
    var html = window.igTemplating.html;
    var groupRow = ctx.implicit;
    return html`<span>Total items with value: ${groupRow.value} are ${groupRow.records.length}</span>`;
}, false);

    Group Row Selector Templates

    Conforme mencionado acima, a linha do grupo, exceto para a interface de usuário expandir/recolher, é totalmente modelável. Para criar um modelo de seletor de linha Group By personalizado, use GroupByRowSelectorTemplate. A partir do modelo, você pode acessar a variável de contexto fornecida implicitamente, com propriedades que fornecem informações sobre o estado da linha Group By.

    A propriedade SelectedCount mostra quantos registros do grupo estão selecionados no momento, enquanto TotalCount mostra quantos registros pertencem ao grupo.

    <IgbGrid GroupByRowSelectorTemplateScript="GroupByRowSelectorTemplate"></IgbGrid>
//In Javascript
igRegisterScript("GroupByRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html` ${ctx.implicit.selectedCount} / ${ctx.implicit.totalCount} `;
}, false);

    A propriedade GroupRow retorna uma referência à linha do grupo.

    <IgbGrid GroupByRowSelectorTemplateScript="GroupByRowSelectorTemplate"></IgbGrid>
//In Javascript
igRegisterScript("GroupByRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    var groupRow = ctx.implicit.groupRow;
    return html`<div onclick="handleGroupByRowSelectorClick()">Handle groupRow</div> `;
}, false);

    As propriedades SelectedCount e TotalCount podem ser usadas para determinar se o seletor de linha Group By deve ser verificado ou indeterminado (parcialmente selecionado).

    Blazor Grid Group By With Paging

    As linhas de grupo participam do processo de paginação junto com as linhas de dados. Elas contam para o tamanho de página para cada página. As linhas recolhidas não são incluídas no processo de paginação. Qualquer operação de expansão ou recolhimento força o Paging a recalcular a contagem de páginas e ajustar o índice de página, se necessário. Os grupos que abrangem várias páginas são divididos entre elas. A linha de grupo é visível apenas na página em que começa e não é repetida nas páginas subsequentes. As informações de resumo para linhas de grupo são calculadas com base no grupo inteiro e não são afetadas pelo Paging.

    Blazor Group By With Paging Example

    Group By With Summaries

    A integração entre Agrupar por e Resumos é descrita no tópico Resumos.

    Keyboard Navigation

    A interface de agrupamento oferece suporte às seguintes interações de teclado:

    • Para linhas de grupo (o foco deve estar na linha ou na célula de expansão/recolhimento)

      • ALT + DIREITA- Expande o grupo
      • ALT + ESQUERDA- Recolhe o grupo
      • ESPAÇO- seleciona todas as linhas no grupo, se a propriedade rowSelection estiver definida como múltipla

    • Para componentes do grupo IgbChip na área do grupo por (o foco deve estar no chip)

      • SHIFT + ESQUERDA- move a ficha em foco para a esquerda, alterando a ordem de agrupamento, se possível
      • SHIFT + DIREITA- move o chip em foco para a direita, alterando a ordem de agrupamento, se possível
      • ESPAÇO- altera a direção da classificação
      • DELETE- desagrupa o campo
      • Os elementos separados do chip também são focalizáveis e podem ser interagidos usando a tecla ENTER.

    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-group-row-background: #969799;
    --ig-grid-group-row-selected-background: #969799;
    --ig-grid-group-label-column-name-text: #f8f8f8;
    --ig-grid-group-label-text: #f8f8f8;
    --ig-grid-group-count-text-color: #222;
    --ig-grid-expand-icon-color: #f8f8f8;
    --ig-grid-expand-icon-hover-color: #f8f8f8;
}

    Demo

    Known Limitations

    Limitação Descrição
    A quantidade máxima de colunas agrupadas é 10. Se mais de 10 colunas forem agrupadas, um erro será gerado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.