Grid Column Reordering & Moving
The Blazor Grid Column Moving feature in Ignite UI for Blazor allows quick and easy column reordering. This can be done through the Column Moving API or by dragging and dropping the headers to another position via mouse or touch gestures. In the Blazor Grid, you can enable Column Moving for pinned and unpinned columns and for Multi-Column Headers as well.
[!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
Overview
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
In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically:
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
- Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed.
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.
Events
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
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties.
In case you would like to change some of the colors, you need to set a class for the grid first:
<IgbGrid class="grid"></IgbGrid>
Then set the related CSS properties to this class:
.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
- Virtualization and Performance
- Paging
- Filtering
- Sorting
- Summaries
- Column Pinning
- Column Resizing
- Selection
- Searching
Our community is active and always welcoming to new ideas.