Topic Overview
Purpose |
This topic explains conceptually the Column Moving feature of the igGrid™ and the functionalities this feature provides. | ||||||||
---|---|---|---|---|---|---|---|---|---|
Required background |
The following topics are prerequisites to understanding this topic:
| ||||||||
In this topic |
This topic contains the following sections: |
igGrid Column moving summary |
Column Moving is a feature of the igGrid that enables changing the position of a column in the grid and, in effect, reordering of the grid’s columns. This can be performed either by the user from the grid interface or programmatically through the API of the Column Moving feature. The user can move columns by either dragging them or through selecting the desire column position from a special column moving interface (invoked with a button in the column header). Draging is not supported on touch-enabled devices. Only one column can be moved at a time. For details on how to move columns from the igGrid interface, see User Interactions and Usability. For information on how to move columns in code, refer to the Moving Columns Programmatically topic. Column moving can be performed on individual columns or on groups of columns. Column Moving is rendered in the Feature Chooser and is compatible with all other igGrid features including Multi-Column Headers. The Column Moving feature re-renders the data in the grid only. It does not alter the data source in any way. Column Moving is enabled by adding a new feature object to the features array of the igGrid and setting the name property of that feature object to ColumnMoving. When enabled, column moving is allowed for all columns unless explicitly specified otherwise. For details, refer to the Enabling Column Moving topic. |
---|---|
Column Moving type |
The type of the Column Moving defines how columns are moved in the Document Object Model (DOM). The types are:
By default, column moving is performed through DOM Manipulation. In some browsers, however, re-creating the grid is faster than detaching and attaching nodes so you might want to explicitly set the type to Grid Re-Rendering. Note: In general, column moving in Internet Explorer® is faster with grid re-rendering, while other browsers perform better with DOM Manipulation. Results may vary depending on the features enabled in the grid and the amount of data rendered. In addition to that, the browser requirements of your application may have an impact on the choice of using one type over another. The Column Moving type is configured through its type property. For details, refer to the Configuring Column Moving topic. |
Moving of grouped columns |
Column Moving can be used in combination with the Multi-Column Headers feature. More precisely:
|
User interactions summary |
Users can move columns with:
Drag-and-drop is supported on mouse-enabled devices (laptops, desktop computers) and so is moving columns through drag-and-drop. Moving columns through drag-and-drop has two modes of operation: Immediate and Deferred based on whether the grid continually refreshes as the mouse is being drag or is refreshed only once upon releasing the mouse button. For more information on modes, refer to Column Moving mode section. The column moving drop-down is supported for all kinds of devices, but is most useful on touch-enabled devices. It is accessed through a button in the column header which opens a drop-down menu with options listing the target positions to which to move the column: First, Left, Right or Last. The dialog is supported for all devices. Dialog is accessed by clicking on the button from the column moving drop-down of each column. The dialog lists all columns of the grid with options to re-arrange them. | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
User interactions summary table |
The following table lists the actions with which the user can move columns on either a standard computer or a mobile device. Further details on moving columns on mobile devices are available in the Touch Support block.
| ||||||||||||||||||||||||
Moving columns by drag-and-drop |
Moving columns by drag-and-drop is supported only on mouse-enabled devices. The user moves a column by dragging it by its header and dropping it at the desired target position. When a column is selected (automatically at mouse hover over the column header), the color of its header changes to indicate the selection. The user then clicks and drags and the selection color of the header is preserved during dragging. How the column is moved as a result of the dragging action depend on which Column Moving mode has been configured. In Immediate mode, the entire column is moved as soon as its header gets over another column (Looks like columns are being swapped). In deferred mode, the column is not moved until its header is dropped onto a new location. Instead, column dragging is indicated by a copy of its header is created and the current potential drop position is indicated by a pair of arrowheads. Columns can be disabled from drag-and-drop on a per-column by column basis. For details, refer to the Configuring Column Moving topic. | ||||||||||||||||||||||||
Moving columns through the Column Moving drop-down menu |
This moving columns option is supported on all kinds of devices, but is especially useful on touch-enabled devices, because drag-and-drop is not supported on them. The user moves a column by selecting its target position from a drop-down menu. The menu is accessible through a column-moving button which is available by default in the header of each column. When clicked/touched this button opens a Column Moving drop-down menu. The Column Moving menu has options for moving the column to a particular position in the grid:
Each menu item, when clicked performs the operation immediately. The Column Moving drop-down menu also has a Moving columns through the Column Moving dialog section). button which opens a column moving dialog with the same name ( ). (See theThe Column Moving drop-down menu can be enabled/disabled on all-or-none basis meaning that you can enable/disable it for all columns in the grid and not on individual columns. The menu is enabled by default. You disable it by setting the addMovingDropdown property to false. Related Topics | ||||||||||||||||||||||||
Moving columns through the Column Moving dialog |
The dialog provides users a convenient way to re-arrange the columns in in the grid. The dialog opens when the user presses the button in the column moving drop-down.The dialog is supported on all kinds of devices, but is especially useful on touch-enabled devices, because drag-and-drop is not supported on them. The dialog is available only when the column moving drop-down is enabled; it cannot be enabled or called separately from that drop-down.The dialog offers users two alternative ways to move/re-arrange columns:
The column position changes take place immediately as the user is operating with the dialog. That is the dialog has no and buttons.You can configure the dialog’s width, height, and drag animation duration with the movingDialogWidth, movingDialogHeight, movingDialogAnimationDuration properties of the Column Moving feature. Related Topics | ||||||||||||||||||||||||
Touch Support |
On touch-enabled devices, users can move columns only through the column moving drop-down or dialog. They cannot move columns by because drag-and-drop is not supported on these devices. | ||||||||||||||||||||||||
Column Moving mode |
The mode of the Column Moving feature specifies how the user experiences column moving when dragging the column header. The modes are Immediate and Deffered:
The following screenshot demonstrates a column being dragged in Immediate mode. Note how the header of the dragged column has changed its appearace and position. Once the header passes over the Product Name column, the Reorder Point and Product Name columns will swap their positions. The following screenshot demonstrates a column being dragged in Deferred mode. A copy of the Reorder Point column header has been dragged over the Product ID column, but the Reorder Point column itself has not moved yet from its original position; instead, drop indicators (the two vertical arrowheads) suggest the new position of the column. Once the mouse button is released, the Reorder Point column will move to that new position. The Column Moving mode is configured from the mode property of the Column Moving feature. The default Column Moving mode is Immediate. Related Topics: |
Column Moving configuration summary chart |
The following table lists the configurable aspects of igGrid Column Moving. Additional details are available after the table.
| ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Column Moving default configuration |
By default, Column Moving is configured with DOM Manipulation type, Immediate mode, and with its column moving interface enabled. The following table lists the default settings of the respective properties.
|