Reordenação e movimentação de colunas da grade

    O recurso Blazor Grid Column Moving no Ignite UI for Blazor permite uma reordenação de colunas rápida e fácil. Isso pode ser feito por meio da API Column Moving ou arrastando e soltando os cabeçalhos para outra posição por meio de gestos de mouse ou toque. No Blazor Grid, você pode habilitar o Column Moving para colunas fixadas e não fixadas e também para Multi-Column Headers.

    [!Note] Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns.

    [!Note] If a column header is templated and the Column Moving is enabled or the corresponding column is groupable, then the templated elements need to have the draggable attribute set to false!

    [!Note] If the pinned area exceeds its maximum allowed width (80% of the total IgbGrid width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.

        public RenderFragment<IgbColumnTemplateContext> headerTemplate => (context) =>
    {
        return @<IgbIcon Collection="fas" IconName="fa-thumbtack" draggable="false" @onclick="() => onClick()"></IgbIcon>;
    };

    Blazor Grid Column Moving Overview Example

    Visão geral

    Column moving feature is enabled on a per-grid level, meaning that the IgbGrid could have either movable or immovable columns. This is done via the Moving input of the IgbGrid.

    <IgbGrid Moving=true></IgbGrid>

    API

    Além da funcionalidade de arrastar e soltar, o recurso Column Moving também fornece métodos de API para permitir mover uma coluna/reordenar colunas programaticamente:

    MoveColumn - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter Position (representing a DropPosition value), which determines whether to place the column before or after the target column.

        public async void HandleClick()
    {
        IgbColumn Col1 = await this.grid.GetColumnByVisibleIndexAsync(0);
        IgbColumn Col2 = await this.grid.GetColumnByVisibleIndexAsync(1);
        this.Grid.MoveColumn(Col1,Col2, DropPosition.AfterDropTarget);
    }

    Move- Move uma coluna para um índice visível especificado. Se o parâmetro de índice passado for inválido (negativo ou exceder o número de colunas), ou se a coluna não puder se mover para esse índice (se estiver dentro de outro grupo), nenhuma operação é realizada.

        public async void HandleClick()
    {
        IgbColumn Col1 = await this.grid.GetColumnByVisibleIndexAsync(0);
        this.Col1.Move(3);
    }

    Note that when using the column moving feature, the ColumnMovingEnd event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the Moving property to true.

    Eventos

    There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are ColumnMovingStart, ColumnMoving and ColumnMovingEnd.

    You can subscribe to the ColumnMovingEnd event of the IgbGrid to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the Category column after the Change On Year(%) column in the following code snippet.

        <IgbGrid ShowGroupArea="true" @ref='Grid' Width="100%" Height="100%"
             AllowFiltering=true
             FilterMode="FilterMode.ExcelStyleFilter"
             AutoGenerate=true
             Data=northwindEmployees
             Moving="true"
             ColumnMovingEndScript='onColumnMovingEnd'>
    </IgbGrid>

    igRegisterScript("onColumnMovingEnd", (event) => {
    if (event.detail.source.field === "Category" && event.detail.target.field === "Change On Year(%)") {
        event.detail.cancel = true;
    }
}, false);

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada definindo algumas das propriedades CSS disponíveis.

    Caso você queira alterar algumas das cores, você precisa primeiro definir uma classe para a grade:

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

    Em seguida, defina as propriedades CSS relacionadas a esta classe:

    .grid {
    --ig-grid-ghost-header-text-color: #f4d45c;
    --ig-grid-ghost-header-background: #ad9d9d;
    --ig-grid-ghost-header-icon-color: #f4d45c;
}

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.