Ignite UI™ API Documentation

ui.igGridColumnMoving

Overview
Options
Events
Methods
Theming

Both the igGrid and igHierarchicalGrid controls feature column moving in the grid. Column moving allows you to change the order of the columns as they appear in the grid. The column moving features has two modes:

The immediate mode moves the column header while you are dragging it and animates the swapping of other grid columns. The moving of the column contents is performed when you drop the column header.

Deferred mode uses arrows to show which position the column will be placed if you drop it.

Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igGrid control with column moving feature.

Click here for more information on how to get started using this API . For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
	  <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        var products = [
            { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
            { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
            { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
            { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
            { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
            { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
            { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
            { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
            { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
        ];
 
        $(function () {
            $("#gridColumnMoving").igGrid({
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number" },
                    { headerText: "Product Name", key: "Name", dataType: "string" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
                ],
                features:[
                    {
                        name: "ColumnMoving"
                    }
                ],
                width: "500px",
                dataSource: products
            });
        });
    </script>
</head>
<body>
    <table id="gridColumnMoving"></table>
</body>
</html>

Related Samples

Column Moving (igGrid)

addMovingDropdown

Type:: bool
Default:: true

Specifies if header cells should include an additional button that opens a moving helper dropdown.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							addMovingDropdown: false
						}
					]
				});

				//Get
				var addMovingDropdown = $(".selector").igGridColumnMoving("option", "addMovingDropdown");

columnMovingDialogContainment

Type:: string
Default:: "owner"

Controls containment behavior of column moving dialog.

owner The dialog will be draggable only in the grid area
window The dialog will be draggable in the whole window area.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "ColumnMoving",
							columnMovingDialogContainment : "window"
						}
					]
				});

				//Get
				var columnMovingDialogContainment = $(".selector").igGridColumnMoving("option", "columnMovingDialogContainment");

columnSettings

Type:: array
Default:: []
Elements Type:: object

A list of column settings that specifies moving options on a per column basis.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							columnSettings: [
								{ columnKey: "ProductID", allowMoving: true }
							]
						}
					]
				});

				//Get
				var columnSettings = $(".selector").igGridColumnMoving("option", "columnSettings");

allowMoving

Type:: bool
Default:: true

Allows the column to be moved.

Code Sample

 
						//Initialize
						$(".selector").igGrid({
							features : [
								{
									name : "ColumnMoving",
									columnSettings: [
										{ columnIndex: 0, allowMoving: true }
									]
								}
							]
						});

						//Get
						var columnSettings = $(".selector").igGridColumnMoving("option", "columnSettings");
						var allowMoving = columnSettings[0].allowMoving;

columnIndex

Type:: number
Default:: null

Column index. Can be used in place of column key. The preferred way of populating a column setting is to always use the column keys as identifiers.

Code Sample

 
						//Initialize
						$(".selector").igGrid({
							features : [
								{
									name : "ColumnMoving",
									columnSettings: [
										{ columnIndex: 0, allowMoving: true }
									]
								}
							]
						});

						//Get
						var columnSettings = $(".selector").igGridColumnMoving("option", "columnSettings");
						var columnIndex = columnSettings[0].columnIndex;

columnKey

Type:: string
Default:: null

Column key. This is a required property in every column setting if columnIndex is not set.

Code Sample

 
						//Initialize
						$(".selector").igGrid({
							features : [
								{
									name : "ColumnMoving",
									columnSettings: [
										{ columnKey: "ProductID", allowMoving: true }
									]
								}
							]
						});

						//Get
						var columnSettings = $(".selector").igGridColumnMoving("option", "columnSettings");
						var columnKey = columnSettings[0].columnKey;

dialogWidget

Type:: string
Default:: "igGridModalDialog"

Name of the dialog widget to be used. It should inherit from $.ui.igGridModalDialog.

Code Sample

 
				//create dialog widget that inherits from $.ui.igGridModalDialog
				$.widget("ui.CustomDialog", $.ui.igGridModalDialog, {});
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							dialogWidget: "CustomDialog"
						}
					]
				});

				//Get
				var dialogWidget = $(".selector").igGridColumnMoving("option", "dialogWidget");

dragHelperOpacity

Type:

number

Default:

1.0
Specifies the opacity of the drag markup, while a column header is being dragged.
The value must be between 0 and 1. When GroupBy is enabled, the corresponding option in the GroupBy configuration
will be used with priority over this one.
Code Sample
```
 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							dragHelperOpacity: 0.5
						}
					]
				});

				//Get
				var dragHelperOpacity = $(".selector").igGridColumnMoving("option", "dragHelperOpacity");
			 
```

dropDownMoveFirstText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption for the move last dropdown button. Use option locale.dropDownMoveFirstText.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							dropDownMoveFirstText: "New Move First"
						}
					]
				});

				//Get
				var dropDownMoveFirstText = $(".selector").igGridColumnMoving("option", "dropDownMoveFirstText");

dropDownMoveLastText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption for the move last dropdown button. Use option locale.dropDownMoveLastText.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							dropDownMoveLastText: "New Move Last"
						}
					]
				});

				//Get
				var dropDownMoveLastText = $(".selector").igGridColumnMoving("option", "dropDownMoveLastText");

dropDownMoveLeftText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption for the move left dropdown button. Use option locale.dropDownMoveLeftText.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							dropDownMoveLeftText: "New Move Left"
						}
					]
				});

				//Get
				var dropDownMoveLeftText = $(".selector").igGridColumnMoving("option", "dropDownMoveLeftText");

dropDownMoveRightText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption for the move right dropdown button. Use option locale.dropDownMoveRightText.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							dropDownMoveRightText: "New Move Right"
						}
					]
				});

				//Get
				var dropDownMoveRightText = $(".selector").igGridColumnMoving("option", "dropDownMoveRightText");

featureChooserSubmenuText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption text for the feature chooser submenu button. Use option locale.featureChooserSubmenuText.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							featureChooserSubmenuText: "Move to"
						}
					]
				});

					//Get
				var featureChooserSubmenuText = $(".selector").igGridColumnMoving("option", "featureChooserSubmenuText");

hideHeaderContentsDuringDrag

Type:: bool
Default:: true

Specifies whether the contents of the column being dragged will get hidden. The option is only
relevant in immediate moving mode.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							hideHeaderContentsDuringDrag: false
						}
					]
				});

					//Get
				var hideHeaderContentsDuringDrag = $(".selector").igGridColumnMoving("option", "hideHeaderContentsDuringDrag");

inherit

Type:

bool

Default:

false

Enables/disables feature inheritance for the child layouts. NOTE: It only applies for igHierarchicalGrid.

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

 
					//Initialize
				$(".selector").igGridColumnMoving({
					language: "ja"
				});

				// Get
				var language = $(".selector").igGridColumnMoving("option", "language");

				// Set
				$(".selector").igGridColumnMoving("option", "language", "ja");

locale

Type:: object
Default:: {}

dropDownMoveFirstText

Type:: string
Default:: ""

Specifies caption for the move first dropdown button.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { dropDownMoveFirstText : "New Move First"}
							}
						]
					});

					//Get
					var dropDownMoveFirstText = $(".selector").igGridColumnMoving("option", "locale").dropDownMoveFirstText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", { dropDownMoveFirstText : "New Move First" });

dropDownMoveLastText

Type:: string
Default:: ""

Specifies caption for the move last dropdown button.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { dropDownMoveLastText : "New Move Last"}
							}
						]
					});

					//Get
					var dropDownMoveFirstText = $(".selector").igGridColumnMoving("option", "locale").dropDownMoveLastText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", { dropDownMoveLastText : "New Move Last" });

dropDownMoveLeftText

Type:: string
Default:: ""

Specifies caption for the move left dropdown button.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { dropDownMoveLeftText : "New Move Left"}
							}
						]
					});

					//Get
					var dropDownMoveLeftText = $(".selector").igGridColumnMoving("option", "locale").dropDownMoveLeftText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", { dropDownMoveLeftText : "New Move Left" });

dropDownMoveRightText

Type:: string
Default:: ""

Specifies caption for the move right dropdown button.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { dropDownMoveRightText : "New Move Right"}
							}
						]
					});

					//Get
					var dropDownMoveRightText = $(".selector").igGridColumnMoving("option", "locale").dropDownMoveRightText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", { dropDownMoveRightText : "New Move Right" });

featureChooserSubmenuText

Type:: string
Default:: ""

Specifies caption text for the feature chooser submenu button.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { featureChooserSubmenuText : "Move to"}
							}
						]
					});

					//Get
					var featureChooserSubmenuText = $(".selector").igGridColumnMoving("option", "locale").featureChooserSubmenuText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", { featureChooserSubmenuText : "Move to" });

movingDialogButtonApplyText

Type:: string
Default:: ""

Specifies the apply button text.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingDialogButtonApplyText : "Apply"}
							}
						]
					});

					//Get
					var movingDialogButtonApplyText = $(".selector").igGridColumnMoving("option", "locale").movingDialogButtonApplyText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", {movingDialogButtonApplyText : "Apply"});

movingDialogButtonCancelText

Type:: string
Default:: ""

Specifies the cancel button text.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingDialogButtonCancelText : "Cancel"}
							}
						]
					});

					//Get
					var movingDialogButtonCancelText = $(".selector").igGridColumnMoving("option", "locale").movingDialogButtonCancelText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", {movingDialogButtonCancelText : "Cancel"});

movingDialogCaptionButtonAsc

Type:: string
Default:: ""

Specifies caption for each move up button in the column moving dialog.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingDialogCaptionButtonAsc : "Ascending"}
							}
						]
					});

					//Get
					var movingDialogCaptionButtonAsc = $(".selector").igGridColumnMoving("option", "locale").movingDialogCaptionButtonAsc;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", {movingDialogCaptionButtonAsc : "Ascending"});

movingDialogCaptionButtonDesc

Type:: string
Default:: ""

Specifies caption for each move down button in the column moving dialog.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingDialogCaptionButtonDesc : "Descending"}
							}
						]
					});

					//Get
					var movingDialogCaptionButtonDesc = $(".selector").igGridColumnMoving("option", "locale").movingDialogCaptionButtonDesc;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", {movingDialogCaptionButtonDesc : "Descending"});

movingDialogCaptionText

Type:: string
Default:: ""

Specifies caption text for the column moving dialog.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingDialogCaptionText : "My Moving Dialog"}
							}
						]
					});

					//Get
					var movingDialogCaptionText = $(".selector").igGridColumnMoving("option", "locale").movingDialogCaptionText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", {movingDialogCaptionText : "My Moving Dialog"});

movingDialogCloseButtonTitle

Type:: string
Default:: ""

Specifies title for close dialog button.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingDialogCloseButtonTitle : "Close"}
							}
						]
					});

					//Get
					var movingDialogDropTooltipText = $(".selector").igGridColumnMoving("option", "locale").movingDialogCloseButtonTitle;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", {movingDialogCloseButtonTitle : "Close"});

movingDialogDisplayText

Type:: string
Default:: ""

Specifies caption text for the feature chooser entry.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingDialogDisplayText : "My Moving Dialog"}
							}
						]
					});

					//Get
					var movingDialogDisplayText = $(".selector").igGridColumnMoving("option", "locale").movingDialogDisplayText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", {movingDialogDisplayText : "My Moving Dialog"});

movingDialogDropTooltipText

Type:: string
Default:: ""

Specifies text for drop tooltip in column moving dialog.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingDialogDropTooltipText : "Set your tooltip text"}
							}
						]
					});

					//Get
					var movingDialogDropTooltipText = $(".selector").igGridColumnMoving("option", "locale").movingDialogDropTooltipText;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", {movingDialogDropTooltipText : "Set your tooltip text"});

movingToolTipMove

Type:: string
Default:: ""

Specifies tooltip text for the move indicator.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "ColumnMoving",
								locale: { movingToolTipMove : "My tooltip"}
							}
						]
					});

					//Get
					var movingToolTipMove = $(".selector").igGridColumnMoving("option", "locale").movingToolTipMove;

					//Set
					$(".selector").igGridColumnMoving("option", "locale", { movingToolTipMove : "My tooltip" });

mode

Type:

enumeration

Default:

immediate
Specify the drag-and-drop mode for the feature.
Members
- immediate
- Type:string
- Column headers will rearange as you drag with a space opening under the cursor for the header to be dropped on.
- deferred
- Type:string
- A clone of the header dragged will be created and indicators will be shown between columns to help navigate the drop.
Code Sample
```
 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							mode: "deferred"
						}
					]
				});
				//Get
				var mode = $(".selector").igGridColumnMoving("option", "mode");
			 
```
moveType

Type:

enumeration

Default:

dom
Specify the way columns will be rearranged.
Members
- dom
- Type:string
- Columns will be rearranged through dom manipulation.
- render
- Type:string
- Columns will not be rearranged but the grid will be rendered again with the new column order. Please note this option is incompatible with immediate move mode.
Code Sample
```
 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							moveType: "render"
						}
					]
				});
				//Get
				var moveType = $(".selector").igGridColumnMoving("option", "moveType");
				//Set
				$(".selector").igGridColumnMoving("option", "moveType", "render");
			 
```

movingAcceptanceTolerance

Type:: number
Default:: 20

Specifies the length (in pixels) between the dragged column and the column edges below which the move operation is accepted.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingAcceptanceTolerance: 10
						}
					]
				});

				//Get
				var movingAcceptanceTolerance = $(".selector").igGridColumnMoving("option", "movingAcceptanceTolerance");

movingDialogAnimationDuration

Type:: number
Default:: 200

Specifies time in milliseconds for animation duration to show/hide modal dialog.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogAnimationDuration: 100
						}
					]
				});

				//Get
				var movingDialogAnimationDuration = $(".selector").igGridColumnMoving("option", "movingDialogAnimationDuration");

movingDialogCaptionButtonAsc
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption for each move up button in the column moving dialog. Use option locale.movingDialogCaptionButtonAsc.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogCaptionButtonAsc: "Ascending"
						}
					]
				});

				//Get
				var movingDialogCaptionButtonAsc = $(".selector").igGridColumnMoving("option", "movingDialogCaptionButtonAsc");

movingDialogCaptionButtonDesc
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption for each move down button in the column moving dialog. Use option locale.movingDialogCaptionButtonDesc.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogCaptionButtonDesc: "Descending"
						}
					]
				});

				//Get
				var movingDialogCaptionButtonDesc = $(".selector").igGridColumnMoving("option", "movingDialogCaptionButtonDesc");

movingDialogCaptionText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption text for the column moving dialog. Use option locale.movingDialogCaptionText.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogCaptionText: "My Moving Dialog"
						}
					]
				});

				//Get
				var movingDialogCaptionText = $(".selector").igGridColumnMoving("option", "movingDialogCaptionText");

movingDialogDisplayText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption text for the feature chooser entry. Use option locale.movingDialogDisplayText.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogDisplayText: "My Dialog"
						}
					]
				});

				//Get
				var movingDialogDisplayText = $(".selector").igGridColumnMoving("option", "movingDialogDisplayText");

movingDialogDropTooltipMarkup

Type:: string
Default:: "<div><p><span></span><strong>{text}</strong></p></div>"

Specifies markup for drop tooltip in column moving dialog.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogDropTooltipMarkup: "<div style='color:red'><p><span></span><strong>{text}</strong></p></div>"
						}
					]
				});

				//Get
				var movingDialogDropTooltipMarkup = $(".selector").igGridColumnMoving("option", "movingDialogDropTooltipMarkup");

movingDialogDropTooltipText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies text for drop tooltip in column moving dialog. Use option locale.movingDialogDropTooltipText.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogDropTooltipMarkup: "<div style='color:red'><p><span></span><strong>{text}</strong></p></div>"
						}
					]
				});

				//Get
				var movingDialogDropTooltipMarkup = $(".selector").igGridColumnMoving("option", "movingDialogDropTooltipMarkup");

movingDialogHeight

Type:: number
Default:: ""

Specifies height of column moving dialog.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogHeight: "400px"
						}
					]
				});

				//Get
				var movingDialogHeight = $(".selector").igGridColumnMoving("option", "movingDialogHeight");

movingDialogWidth

Type:: number
Default:: 400

Specifies width of column moving dialog.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogWidth: "300px"
						}
					]
				});

				//Get
				var movingDialogWidth = $(".selector").igGridColumnMoving("option", "movingDialogWidth");

movingScrollTolerance

Type:: number
Default:: 20

Specifies the length (in pixels) between the dragged column and the grid edges below which horizontal scrolling occurs.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingScrollTolerance: 10
						}
					]
				});

				//Get
				var movingScrollTolerance = $(".selector").igGridColumnMoving("option", "movingScrollTolerance");

movingToolTipMove
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Specifies caption text for the feature chooser submenu button. Use option locale.movingToolTipMove.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingToolTipMove: "My tooltip"
						}
					]
				});

				//Get
				var movingToolTipMove = $(".selector").igGridColumnMoving("option", "movingToolTipMove");

regional
Inherited

Type:: enumeration
Default:: en-US

Set/Get the regional setting for the widget.

Code Sample

 
				//Initialize
				$(".selector").igGridColumnMoving({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igGridColumnMoving("option", "regional");
				// Set
				$(".selector").igGridColumnMoving("option", "regional", "ja");

scrollDelta

Type:: number
Default:: 2

Specifies the length (in pixels) of each individual scroll operation.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							scrollDelta: 4
						}
					]
				});

				//Get
				var scrollDelta = $(".selector").igGridColumnMoving("option", "scrollDelta");

scrollSpeedMultiplier

Type:: number
Default:: 2.0

Specifies a multiplier for the delay between subsequent scroll operations. The larger this number is, the slower scrolling will appear to be.

Code Sample

 
				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							scrollSpeedMultiplier: 4.0
						}
					]
				});

				//Get
				var scrollSpeedMultiplier = $(".selector").igGridColumnMoving("option", "scrollSpeedMultiplier");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

columnDragCanceled

Cancellable:: false

Event which is fired when a drag operation is canceled.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingcolumndragcanceled", ".selector", function (evt, args) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					args.owner;

					// reference to the grid widget.
					args.owner.grid;

					// the key of the column, which was being dragged
					args.columnKey;

					// the index of the column, which was being dragged
					args.columnIndex;

					// the orginal th that was being dragged
					args.header;

					// the cloned DOM element that was actually being dragged
					args.helper;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							columnDragCanceled: function(evt, args){ ... }
						}
					]
				});

columnDragEnd

Cancellable:: false

Event which is fired when a drag operation ends on a column header.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingcolumndragend", ".selector", function (evt, args) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					args.owner;

					// reference to the grid widget.
					args.owner.grid;

					// the key of the column, which was being dragged
					args.columnKey;

					// the index of the column, which was being dragged
					args.columnIndex;

					// the orginal th that was being dragged
					args.header;

					// the cloned DOM element that was actually being dragged
					args.helper;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							columnDragEnd: function(evt, args){ ... }
						}
					]
				});

columnDragStart

Cancellable:: true

Event which is fired when a drag operation begins on a column header.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingcolumndragstart", ".selector", function (evt, args) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					args.owner;

					// reference to the grid widget.
					args.owner.grid;

					// the key of the column, which was being dragged
					args.columnKey;

					// the index of the column, which was being dragged
					args.columnIndex;

					// the orginal th that was being dragged
					args.header;

					// the cloned DOM element that was actually being dragged
					args.helper;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							columnDragStart: function(evt, args){ ... }
						}
					]
				});

columnMoved

Cancellable:: false

Event which is fired when a column moving operation completes.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingcolumnmoved", ".selector", function (evt, args) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					args.owner;

					// reference to the grid widget.
					args.owner.grid;

					// the key of the column, which was being moved
					args.columnKey;

					// the previous index of the column, which was being moved
					args.oldIndex;

					// the new index of the column, which was being moved
					args.newIndex;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							columnMoved: function(evt, args){ ... }
						}
					]
				});

columnMoving

Cancellable:: true

Event which is fired when a column moving operation is initiated.

evt
Type: Event

JQuery event object.
args
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingcolumnmoving", ".selector", function (evt, args) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					args.owner;

					// reference to the grid widget.
					args.owner.grid;

					// the key of the column, which was being moved
					args.columnKey;

					// the index of the column, which was being moved
					args.columnIndex;

					// the new column index of the column that was being moved
					args.targetIndex;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							columnMoving: function(evt, args){ ... }
						}
					]
				});

movingDialogClosed

Cancellable:: false

Event fired after the moving dialog has been closed.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogclosed", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// he moving dialog element. This is a jQuery object.
					ui.movingDialogElement;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogClosed: function(evt, ui){ ... }
						}
					]
				});

movingDialogClosing

Cancellable:: true

Event fired before the moving dialog is closed.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogclosed", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialogElement;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogClosed: function(evt, ui){ ... }
						}
					]
				});

movingDialogContentsRendered

Cancellable:: false

Event fired after the contents of the model dialog are rendered.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogcontentsrendered", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialog;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogContentsRendered: function(evt, ui){ ... }
						}
					]
				});

movingDialogContentsRendering

Cancellable:: true

Event fired before the contents of the model dialog are rendered.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogcontentsrendering", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialog;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogContentsRendering: function(evt, ui){ ... }
						}
					]
				});

movingDialogDragColumnMoved

Cancellable:: false

Event fired when column moving is completed through dragging it in the moving dialog.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogdragcolumnmoved", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialog;

					// the key of the column, which was being moved
					ui.columnKey;

					// the index of the column, which was being moved
					ui.columnIndex;

					// the new column index of the column that was being moved
					ui.targetIndex;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogDragColumnMoved: function(evt, ui){ ... }
						}
					]
				});

movingDialogDragColumnMoving

Cancellable:: true

Event fired when column moving is initiated through dragging it in the moving dialog.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogdragcolumnmoving", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialog;

					// the key of the column, which was being moved
					ui.columnKey;

					// the index of the column, which was being moved
					ui.columnIndex;

					// the new column index of the column that was being moved
					ui.targetIndex;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogDragColumnMoving: function(evt, ui){ ... }
						}
					]
				});

movingDialogDragged

Cancellable:: false

Event fired every time the moving dialog changes its position.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingmovingdialogdragged", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialogElement;

					// the original position of the moving dialog div as { top, left } object, relative to the page
					ui.originalPosition;

					// the current position of the moving dialog div as { top, left } object, relative to the page
					ui.position;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogDragged: function(evt, ui){ ... }
						}
					]
				});

movingDialogMoveDownButtonPressed

Cancellable:: false

Event fired when move down button is pressed in the moving dialog.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogmovedownbuttonpressed", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialog;

					// the key of the column, which was being moved
					ui.columnKey;

					// the index of the column, which was being moved
					ui.columnIndex;

					// the new column index of the column that was being moved
					ui.targetIndex;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogMoveDownButtonPressed: function(evt, ui){ ... }
						}
					]
				});

movingDialogMoveUpButtonPressed

Cancellable:: false

Event fired when move up button is pressed in the moving dialog.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogmoveupbuttonpressed", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialog;

					// the key of the column, which was being moved
					ui.columnKey;

					// the index of the column, which was being moved
					ui.columnIndex;

					// the new column index of the column that was being moved
					ui.targetIndex;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogMoveUpButtonPressed: function(evt, ui){ ... }
						}
					]
				});

movingDialogOpened

Cancellable:: false

Event fired after the column chooser is already opened.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogopened", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialogElement;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogOpened: function(evt, ui){ ... }
						}
					]
				});

movingDialogOpening

Cancellable:: true

Event fired before the moving dialog is opened.

evt
Type: Event

JQuery event object.
args
Type: Object
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("iggridcolumnmovingmovingdialogopening", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					// reference to the igGridColumnMoving widget.
					ui.owner;

					// reference to the grid widget.
					ui.owner.grid;

					// the moving dialog element. This is a jQuery object.
					ui.movingDialogElement;
				});

				//Initialize
				$(".selector").igGrid({
					features : [
						{
							name : "ColumnMoving",
							movingDialogOpening: function(evt, ui){ ... }
						}
					]
				});

Show Details

changeLocale

.igGridColumnMoving( "changeLocale" );
Changes the all locales into the widget element to the language specified in options.language
Note that this method is for rare scenarios, see language or locale option setter.
Code Sample
```
 
				$(".selector").igGridColumnMoving("changeLocale");
			 
```
destroy

.igGridColumnMoving( "destroy" );
Restoring overwritten functions.
Code Sample
```
 
				$(".selector").igGridColumnMoving("destroy");
			 
```
moveColumn

.igGridColumnMoving( "moveColumn", column:object, target:object, [after:bool], [inDom:bool], [callback:function] );
Moves a visible column at a specified place, in front or behind a target column or at a target index
Note: This method is asynchronous which means that it returns immediately and any subsequent code will execute in parallel. This may lead to runtime errors. To avoid them put the subsequent code in the callback parameter provided by the method.
- column
- Type:object
- An identifier of the column to be moved. It can be a key, a Multi-Column Header identificator, or an index in a number format. The latter is not supported when the grid contains multi-column headers.
- target
- Type:object
- An identifier of a column where the moved column should move to or an index at which the moved column should be moved to. In the case of a column identifier the column will be moved after it by default.
- after
- Type:bool
- Optional
- Specifies whether the column moved should be moved after or before the target column.
- inDom
- Type:bool
- Optional
- Specifies whether the column moving will be enacted through DOM manipulation or through rerendering of the grid.
- callback
- Type:function
- Optional
- Specifies a custom function to be called when the column is moved.
Code Sample
```
 
				// calling method with column indexes
				$(".selector").igGridColumnMoving("moveColumn", 0, 1, true, false);

				// calling method with column keys
				$(".selector").igGridColumnMoving("moveColumn", "ProductId", "ProductName", true, true);

				// calling method with column keys and function callback
				$(".selector").igGridColumnMoving("moveColumn", "ProductId", "ProductName", true, true, function () {
					// Custom code executed after the move operation finishes
				});
			 
```

ui-iggrid-columnmoving-dropdown-dialog ui-widget ui-widget-content ui-corner-all

Classes applied to the column moving dropdown dialog.
ui-iggrid-columnmoving-dropdown-ddlistitemicons ui-state-default

Classes applied to each item in the column moving dropdown list.
ui-iggrid-columnmoving-dropdown-listitem-hover ui-state-active ui-state-hover

Classes applied to each item in the column moving dropdown list when mouse hovers over them.
ui-iggrid-columnmoving-dropdown-ddlistitemtext

Classes applied to the text of each item in the column moving dropdown list when mouse hovers over them.
ui-iggrid-columnmoving-dropdown-list ui-menu

Classes applied to the column moving dropdown list.
ui-iggrid-hiding-indicator-selected

Classes applied to the column indicators of the moving drop down.
ui-iggrid-columnmoving-dragbottom ui-icon ui-icon-triangle-1-n

Classes applied to the bottom column moving indicator in deferred mode.
ui-iggrid-columnmoving-dragleft

Classes applied to the column moving indicators in deferred mode when they are tilted to the left.
ui-iggrid-columnmoving-dragright

Classes applied to the column moving indicators in deferred mode when they are tilted to the right.
ui-iggrid-columnmoving-dragtop ui-icon ui-icon-triangle-1-s

Classes applied to the top column moving indicator in deferred mode.
ui-iggrid-moving-indicator

Classes applied to the table header button expanding the moving dropdown.
ui-iggrid-columnmovingiconcontainer

Classes applied to the feature chooser icon container.
ui-iggrid-indicatorcontainer

Classes applied to the container for the drop down header button.
ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-first

Classes applied to the move first icon for the column moving dialog.
ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-last

Classes applied to the move last icon for the column moving dialog.
ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-left

Classes applied to the move left icon for the column moving dialog.
ui-icon ui-iggrid-icon-move

Classes applied to the feature chooser icon for column moving feature.
ui-iggrid-featurechooser-li-iconcontainer ui-icon ui-iggrid-icon-right

Classes applied to the move right icon for the column moving dialog.
ui-iggrid-featurechooser-list-submenu ui-menu ui-widget ui-widget-content ui-corner-all

Classes applied to the feature chooser submenu containing the moving items.
ui-iggrid-featurechooser-list-submenu-item ui-state-default

Classes applied to the feature chooser submenu moving items.
ui-state-hover

Classes applied to the feature chooser submenu moving items when hovering over them with the mouse.
ui-state-hover

Classes applied to the table header cells when the mouse hovers on them.
ui-icon ui-icon-close

Classes applied to the close button for the moving dialog.
ui-iggrid-moving-dialog-columns

Classes applied to the lists of items in the moving dialog.
ui-widget-content

Classes applied to the items in the item lists in the moving dialog.
ui-button ui-corner-all ui-button-icon-only ig-sorting-indicator

Classes applied to the inner button elements of the arrow indicators in the moving dialog.
ui-icon-arrowthick-1-s ui-button-icon-primary ui-icon

Classes applied to the move down arrow of each list item in the moving dialog.
ui-icon-arrowthick-1-n ui-button-icon-primary ui-icon

Classes applied to the move up arrow of each list item in the moving dialog.
ui-iggrid-dialog-text

Classes applied to the text of each list item in the moving dialog.

Ignite UI | Samples

ui.igGridColumnMoving

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

addMovingDropdown

Code Sample

columnMovingDialogContainment

Code Sample

columnSettings

Code Sample

allowMoving

Code Sample

columnIndex

Code Sample

columnKey

Code Sample

dialogWidget

Code Sample

dragHelperOpacity

Code Sample

dropDownMoveFirstTextRemoved

Code Sample

dropDownMoveLastTextRemoved

Code Sample

dropDownMoveLeftTextRemoved

Code Sample

dropDownMoveRightTextRemoved

Code Sample

featureChooserSubmenuTextRemoved

Code Sample

hideHeaderContentsDuringDrag

Code Sample

inherit

languageInherited

Code Sample

locale

dropDownMoveFirstText

Code Sample

dropDownMoveLastText

Code Sample

dropDownMoveLeftText

Code Sample

dropDownMoveRightText

Code Sample

featureChooserSubmenuText

Code Sample

movingDialogButtonApplyText

Code Sample

movingDialogButtonCancelText

Code Sample

movingDialogCaptionButtonAsc

Code Sample

movingDialogCaptionButtonDesc

Code Sample

movingDialogCaptionText

Code Sample

movingDialogCloseButtonTitle

Code Sample

movingDialogDisplayText

Code Sample

movingDialogDropTooltipText

Code Sample

movingToolTipMove

Code Sample

mode

Members

Code Sample

moveType

Members

Code Sample

movingAcceptanceTolerance

Code Sample

movingDialogAnimationDuration

Code Sample

movingDialogCaptionButtonAscRemoved

Code Sample

movingDialogCaptionButtonDescRemoved

dropDownMoveFirstText
Removed

dropDownMoveLastText
Removed

dropDownMoveLeftText
Removed

dropDownMoveRightText
Removed

featureChooserSubmenuText
Removed

language
Inherited

movingDialogCaptionButtonAsc
Removed

movingDialogCaptionButtonDesc
Removed

movingDialogCaptionText
Removed

movingDialogDisplayText
Removed

movingDialogDropTooltipText
Removed

movingToolTipMove
Removed

regional
Inherited