Blazor Grid Row Pinning

    The Ignite UI for Blazor Row Pinning feature in Blazor Grid allows you to pin one or multiple rows to the top or bottom of grid. Row Pinning allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the IgbGrid vertically. The Blazor Grid has a built-in row pinning UI, which is enabled by initializing an IgbActionStrip component in the context of Grid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API.

    Blazor Grid Row Pinning Example

    Row Pinning UI

    The built-in row pinning UI is enabled by adding an IgbActionStrip component with the IgbGridPinningActions component. The action strip is automatically shown when hovering a row and will display a pin or unpin button icon based on the state of the row it is shown for. An additional action allowing to scroll the copy of the pinned row into view is shown for each pinned row as well.

        <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

    Row pinning is controlled through the Pinned input of the Row. Pinned rows are rendered at the top of the IgbGrid by default and stay fixed through vertical scrolling of the unpinned rows in the IgbGrid body.

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

    You may also use the IgbGrid's PinRow or UnpinRow methods of the to pin or unpin records by their ID:

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

    Note that the row ID is the primary key value, defined by the PrimaryKey of the grid, or the record instance itself. Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the row is already in the desired state.

    A row is pinned below the last pinned row. Changing the order of the pinned rows can be done by subscribing to the RowPinning event and changing the InsertAtIndex property of the event arguments to the desired position index.

    <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

    You can change the row pinning position via the Pinning configuration option. It allows you to set the pin area position to either Top or Bottom. When set to Bottom pinned rows are rendered at the bottom of the grid, after the unpinned rows. Unpinned rows can be scrolled vertically, while the pinned rows remain fixed at the bottom.

        <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.
    • As Row Selection works entirely with row Ids, selecting pinned rows selects their copies as well (and vice versa). Additionally, range selection (e.g. using Shift + click) within the pinned area works the same way as selecting a range of rows within the scrollable area. The resulting selection includes all rows in between even if they are not currently pinned. Getting the selected rows through the API only returns a single instance of each selected record.

    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.