New to Kendo UI for Angular? Start a free 30-day trial
Column Reordering
The Kendo UI Grid for Angular enables you to reorder its columns in two ways: by dragging the header cells or by implementing manual reordering on user interaction.
To enable column reordering, set the reorderable property of the Kendo UI Grid for Angular to true.
By default, the column-reordering feature is disabled.
Change Theme
Theme
Loading ...
Manual Reordering
You can enable users to reorder a Grid column on a button click or on another user interaction. To achieve this, use the reorderColumn method. The method can reorder only columns that are visible in the Grid.
To reorder a column, provide the following arguments to the method:
- The column that needs to be reordered.
- The new column index.
- A boolean flag that indicates whether the reordered column will be positioned before or after the destination index.
ts
public onClick(grid: GridComponent, column:ColumnBase) {
grid.reorderColumn(column, 0, { before: true });
}The following example demonstrates how to reorder the last column on a button click and make it first.
Change Theme
Theme
Loading ...