Blazor Fixação de linha de grade

O recurso Ignite UI for Blazor fixação de linha em Blazor grade permite fixar uma ou várias linhas na parte superior ou inferior da grade. A fixação de linha permite que os usuários finais fixem linhas em uma ordem específica, duplicando-as em uma área especial que está sempre visível, mesmo quando rolam verticalmente IgbGrid. O Blazor Grid tem uma interface de usuário de fixação de linha interna, que é habilitada pela inicialização de um IgbActionStrip componente no contexto do Grid. Além disso, você pode definir a interface do usuário personalizada e alterar o estado do pino das linhas por meio da API de fixação de linha.

Blazor Grid Row Pinning Example

Row Pinning UI

A interface do usuário de fixação de linha interna é habilitada adicionando um IgbActionStrip componente com o IgbGridPinningActions componente. A faixa de ação é mostrada automaticamente ao passar o mouse sobre uma linha e exibirá um ícone de botão de fixar ou desafixar com base no estado da linha para a qual ela é mostrada. Uma ação adicional que permite rolar a cópia da linha fixada para a exibição também é mostrada para cada linha fixada.

    <IgbGrid Width="100%"  
             Height="100%"
             PrimaryKey="Key"
             AutoGenerate=true
             Data=northwindEmployees
             RowEditable=true>
        <IgbColumn Field="ID" Editable=false></IgbColumn>
        <IgbColumn Field="ContactName"></IgbColumn>
        <IgbColumn Field="ContactTitle"></IgbColumn>
        <IgbColumn Field="City" Sortable=true></IgbColumn>
        <IgbColumn Field="CompanyName" Sortable=true></IgbColumn>
        <IgbColumn Field="Fax" Sortable=true></IgbColumn>
        <IgbColumn Field="Address" Sortable=true></IgbColumn>
        <IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
        <IgbColumn Field="Country" Sortable=true></IgbColumn>
        <IgbColumn Field="Phone" Sortable=true></IgbColumn>
        <IgbActionStrip>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbGridEditingActions></IgbGridEditingActions>
        </IgbActionStrip>
    </IgbGrid>

Row Pinning API

A fixação de linha é controlada por meio da Pinned entrada do Row. As linhas fixadas são renderizadas na parte superior do IgbGrid por padrão e permanecem fixas por meio da rolagem vertical das linhas não afixadas no IgbGrid corpo.

this.Grid.PinRowAsync("ALFKI", 0);

Você também pode usar os IgbGrid métodos ou PinRow UnpinRow métodos do para fixar ou desafixar registros por seu ID:

this.Grid.PinRowAsync("ALFKI", 0);
this.Grid.UnpinRowAsync("ALFKI");

Observe que a ID da linha é o valor da chave primária, definido pela grade ou pela PrimaryKey própria instância do registro. Ambos os métodos retornam um valor booleano indicando se sua respectiva operação foi bem-sucedida ou não. Normalmente, o motivo pelo qual eles falham é que a linha já está no estado desejado.

Uma linha é fixada abaixo da última linha fixada. A alteração da ordem das linhas fixadas pode ser feita assinando o RowPinning evento e alterando a InsertAtIndex propriedade dos argumentos do evento para o índice de posição desejado.

<IgbGrid Width="100%"
             Id="grid"
             RowPinningScript="rowPinningHandler"
             Height="100%"
             PrimaryKey="Key"
             AutoGenerate="true"
             Data="northwindEmployees">
</IgbGrid>

*** In JavaScript ***

function rowPinningHandler(event) {
    event.detail.insertAtIndex = 0;
}

igRegisterScript("rowPinningHandler", rowPinningHandler, false);

Pinning Position

Você pode alterar a posição de fixação da linha por meio da Pinning opção de configuração. Ele permite que você defina a posição da área do pino como Superior ou Inferior. Quando definido como Inferior, as linhas fixadas são renderizadas na parte inferior da grade, após as linhas desafixadas. As linhas não afixadas podem ser roladas verticalmente, enquanto as linhas fixadas permanecem fixas na parte inferior.

    <IgbGrid Id="grid"
            Width="100%"
            Height="100%"
            Pinning=PinningConfig
            PrimaryKey="Key"
            AutoGenerate=true
            Data=northwindEmployees>
    </IgbGrid>
    @code {
        public string Key = "ID";
        private Northwind.EmployeesType[] northwindEmployees = Array.Empty<Northwind.EmployeesType>();
        public IgbPinningConfig PinningConfig = new IgbPinningConfig()
        {
            Rows = RowPinningPosition.Bottom
        };
        protected override async Task OnInitializedAsync()
        {
            northwindEmployees = await this.northwindService.GetEmployees() ?? northwindEmployees;
        }
    }

Custom Row Pinning UI

Você pode definir sua interface do usuário personalizada e alterar o estado do pino das linhas por meio da API relacionada.

Via extra column with icon

Digamos que, em vez de uma faixa de ação, você gostaria de mostrar um ícone de alfinete em cada linha, permitindo que o usuário final clique e altere o estado do alfinete de uma linha específica. Isso pode ser feito adicionando uma coluna extra com um modelo de célula contendo o ícone personalizado.

<IgbColumn Width="70px" BodyTemplateScript="WebGridRowPinCellTemplate"/>

// In Javascript

igRegisterScript("WebGridRowPinCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleRowPin = function toggleRowPin(index) {
        var grid = document.getElementsByTagName("igc-grid")[0];
        grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
    }
    const index = ctx.cell.id.rowIndex;
    return html`<div>
    <span onpointerdown='toggleRowPin("${index}")'>📌</span>
</div>`;
}, false);

Demo

Row Pinning Limitations

Somente os registros existentes na fonte de dados podem ser fixados.
O estado de fixação de linha não é exportado para o Excel. A grade é exportada como se nenhuma fixação de linha fosse aplicada.
As cópias de linhas fixadas na área rolável da grade são parte integrante de como outros recursos de grade alcançam sua funcionalidade na presença de linhas fixadas e, portanto, sua criação não pode ser desabilitada nem removida.
Como a Seleção de linha funciona inteiramente com IDs de linha, a seleção de linhas fixadas também seleciona suas cópias (e vice-versa). Além disso, a seleção de intervalo (por exemplo, usando Shift + clique) na área fixada funciona da mesma maneira que a seleção de um intervalo de linhas na área rolável. A seleção resultante inclui todas as linhas intermediárias, mesmo que elas não estejam fixadas no momento. Obter as linhas selecionadas por meio da API retorna apenas uma única instância de cada registro selecionado.

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-pinned-border-width: 5px;
    --ig-grid-pinned-border-style: double;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

Demo

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.