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.

Example
View Source
Change Theme:

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.
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.

Example
View Source
Change Theme:

In this article

Not finding the help you need?