Column Moving

Columns can be moved in the grid in the following ways:

  • Dragging the column header with the mouse or through touch.
  • Using the column API.

API

The column API methods for moving columns are as follows:

  • moveColumn(key, toIndex): Move one column to specific index.
  • moveColumns(keys, toIndex): Move list of columns to specific index.
  • moveColumnByIndex(fromIndex, toIndex): Move column from fromIndex to toIndex.

Simple Example

The example below demonstrates simple moving via mouse dragging and the API. The following can be noted:

  • Dragging the column headers with the mouse moves the column to the new location.
  • The Medals First and Medals Last buttons call the API moveColumns(keys, toIndex) to place the columns at the start and at the end respectively.
  • The Country First button calls the API moveColumn(key, toIndex) to place the country column first.
  • The Swap First Two button calls the API moveColumnByIndex(fromIndex, toIndex) to swap the first two columns.
  • The Print Columns button calls the API getAllGridColumns() to print to the dev console the current column order.

Suppress Hide Leave

The grid property suppressDragLeaveHidesColumns will stop columns getting removed from the grid if they are dragged outside of the grid. This is handy if the user moves a column outside of the grid by accident while moving a column but doesn't intend to make it hidden.

Suppress Movable

The column property suppressMovable changes whether the column can be dragged. The column header cannot be dragged by the user to move the columns when suppressMovable=true. However the column can be inadvertently moved by placing other columns around it thus only making it practical if all columns have this property.

Lock Position

The column property lockPosition locks columns to the first position in the grid. When lockPosition=true, the column will always appear first, cannot be dragged by the user, and can not be moved out of position by dragging other columns.

Suppress Movable & Lock Position Example

The example below demonstrates these properties as follows:

  • The column 'Age' is locked as first column in the scrollable area of the grid. It is not possible to move this column, or have other columns moved over it to impact it's position. As a result the 'Age' column marks the beggining of the scrollable area regardless it's position.
  • The column 'Athlete' has moving suppressed. It is not possible to move this column, however it is possible to move other columns around it.
  • The grid has suppressDragLeaveHidesColumns=true so columns dragged outside of the grid are not hidden (normally dragging a column out of the grid will hide the column).
  • Age and Athlete columns have the user provided locked-col and suppress-movable-col CSS classes applied to them respectively to change the background color.

Advanced Locked Position Example

Below is a more real work example of where locked columns would be used. The first column is a row number, similar to the row column in Excel. The second column is a buttons column - an application could have buttons for actions eg 'Delete', 'Buy', 'Sell' etc.

From the example the following can be noted:

  • The first two columns are locked into first position by setting colDef.lockPosition=true. This means they cannot be moved out of place, including other columns can not be moved around them.
  • The first two columns have the user provided locked-col CSS class applied to them to change the background color.
  • The sample application listens for column pinned events. If any column is pinned, then the locked columns are also pinned. This is to keep the locked columns at the first position.
    • Clicking Pin Athlete will pin athlete, which will result in fixed columns getting pinned.
    • Clicking Un-Pin Athlete will un-pin athlete, which will result in fixed columns getting un-pinned (assuming no other columns are left pinned).

Lock Visible

When you move columns around it is possible to change their visibility as follows:

  • You can hide a column by dragging it outside of the grid.
  • You can show a column by dragging it from the tool panel onto the grid.

The column property lockVisible will stop individual columns from been made visible or hidden via the UI. When lockVisible=true, then the column will not hide when it is dragged out of the grid, and columns dragged from the tool panel onto the grid will not become visible.

There is slight overlap with the property suppressDragLeaveHidesColumns. When suppressDragLeaveHidesColumns=true then all columns remain visible if they are dragged outside of the grid. This is a good way to block all columns from hiding as the user reorders the columns via dragging. The lockVisible property is at the column level and blocks all UI functions that change a column's visibility.

Lock Visible Example

The example below shows lock visible. The following can be noted:

  • The columns Age, Gold, Silver and Bronze are all locked visible. It is not possible to hide the columns by dragging them out of the grid and not possible to show the columns by dragging them in from the tool panel.
  • If you make a group visible or hidden in the tool panel, the locked columns are not impacted.
  • If you drag a group (eg the 'Athlete' group) out of the grid, all normal columns in the group are removed and all locked columns in the group are left intact.