Version

Configuring Column Moving (igGrid)

Topic Overview

Purpose

This topic explains, with code examples, how to configure the Column Moving feature of the igGrid™.

Required background

The following topics are prerequisites to understanding this topic:

  • Column Moving Overview: This topic explains conceptually the Column Moving feature of the igGrid and the functionalities this feature provides.

  • Enabling Column Moving: This topic explains, with code examples, how to enable the Column Moving feature of the igGrid.

In this topic

This topic contains the following sections:

Column Moving Configuration Summary

The following table lists the configurable aspects of igGrid Column Moving. Additional details are available after the table.

Configurable aspect Details Properties
Mode By default, the Column Moving mode is Immediate. You can configure Deferred mode instead.
Type By default, the Column Moving type is DOM Manipulation. You can configure the type to be Grid Re-Rendering instead. The type affects the feature performance differently across browsers.
Columns You can specify which columns should allow moving and which shouldn’t.
Interface Enable/Disable You can enable/disable the column moving interface of the grid.
Move Columns dialog look-and-feel You can configure the dialog’s width, height, and drag animation duration.

Configuring the Column Moving Mode

By default, the Column Moving mode is Immediate. You can configure Deferred mode instead.

The mode of Column Moving is managed by the mode property of the Column Moving feature.

Property settings

The following table maps the desired configuration to property settings.

In order to: Use this property: And set it to:
Configure Deferred mode mode ”deferred”
Configure Immediate mode mode “immediate”

Example

The following code demonstrates how to set the Column Moving mode to Deferred.

In JavaScript:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnMoving",
            mode: "deferred"
        }
    ]
});

In Razor:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnMoving().Mode(MovingMode.Deferred))
.DataBind()
.Render())

Configuring the Column Moving Type

By default, the Column Moving type is DOM Manipulation. You can configure the type to be Grid Re-Rendering instead. The type affects the feature performance differently across browsers.

The type of Column Moving is managed by the moveType property of the Column Moving feature. (For details, on the Column Moving type, refer to the Column Moving Overview topic.)

Property settings

The following table maps the desired configuration to property settings.

In order to: Use this property: And set it to:
Configure Grid Re-Rendering type moveType "render"
Configure DOM Manipulation type moveType “dom”

Example

The following code demonstrates setting the Column Moving type to Grid Re-Rendering.

In JavaScript:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnMoving",
            moveType: "render"
        }
    ]
});

In Razor:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnMoving().MoveType(MovingType.Render))
.DataBind()
.Render())

Disabling Column Moving for a Column

Overview

You can specify which columns the user should be allowed to move and which shouldn’t. By default, Column Moving is enabled for all columns in the grid. Disabling column moving is done on individual columns.

To disable moving for a column, you need to specify the column (through a column identificator which is either the column key or the column index) and set the allowMoving property to false:

When column is disabled from moving, the Column Moving menu button for that column is hidden.

Property settings

The following table lists the properties and their settings that disable column moving.

In order to: Use these properties: And set it to:
Disable Column Moving for a column either columnSettings.columnKey or columnSettings.columnIndex respectively, either
the key of the column
or
the index number of the column
columnSettings.allowMoving false

Disabling Column Moving for a column in JavaScript

To disable column moving for a column in JavaScript, set the columnSettings property of the feature to an array the objects of which consist of the column identificator and the setting of the allowMoving property for that column.

Use the Column Moving feature columnSettings property to disable one or more columns from moving. columnSettings is an array, so it can hold and arbitrary number of column configuration objects. Each column configuration object consists of columnKey or columnIndex and allowMoving properties. columnKey and columnIndex properties indicate the column to configure. allowMoving property when set to true enables moving of the column (this is the default behavior, so you won’t need to set allowMoving to true).

Setting allowMoving to false disables moving of the column. Use columnKey property when you want to reference the grid columns by its key. Use columnIndex property when you want to reference the initial grid column configuration by index.

Disabling Column Moving for a column in MVC

To disable column moving for a column in ASP.NET MVC, when configuring the grid in the View with the chaining method, use the ColumnSettings method.

The ColumnSettings method accepts lambda expression representing the column settings. In the lambda expression, call the ColumnSetting method which returns a ColumnMovingSettingWrapper object. This object contains the methods to configure individual column: ColumnKey, ColumnIndex and AllowMoving. Those methods mimic the functionality of their counterparts in JavaScript. For an example of a lambda expression, see the Example block.

Example

The code below demonstrates disabling Column Moving for the Product Name column (with column key “Name”) in code as a result of the following settings:

In JavaScript:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnMoving",
            columnSettings: [
                {
                    columnKey: "Name",
                    allowMoving: false
                }
            ]
        }
    ]});

In Razor:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f =>
    f.ColumnMoving()
    .MoveType(MovingType.Render)
    .ColumnSettings(cs => cs.ColumnSetting().ColumnKey("Name").AllowMoving(false)))
.DataBind()
.Render())

Disabling the Column Moving Interface

Overview

You can enable/disable the column moving interface of the grid. Disabling the Column Moving interface hides it from the user.

By default, when the Column Moving feature is enabled, the column moving interface (the drop-down and the button that activates it), is available too. This is to support column moving for touch devices because the user cannot move columns in them by drag-and-drop. You can however choose to disable this interface (In such case, the button opening the drop-down is hidden). Disabling the Column Moving interface affects all columns in the grid.

The column moving interface is managed by the addMovingDropdown property of the feature.

Note: The Column Moving interface is disabled also on columns for which Column Moving is disabled. (For details, see Disabling Column Moving for a Column.)

Property settings

The following table maps the desired configuration to property settings.

In order to: Use these properties: And set it to:
Disable column moving interface addMovingDropdown false

Example

The code samples below demonstrate how to disable the column moving drop-down for column moving:

Property Value
addMovingDropdown false

The following code snippets demonstrate how to set column moving using the addMovingDropdown property in code:

In JavaScript:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnMoving",
            addMovingDropdown: false
        }
    ]
});

In Razor:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnMoving().AddMovingDropdown(false))
.DataBind()
.Render())

Related Content

Topics

The following topics provide additional information related to this topic.

  • Moving Columns Programmatically: This topic explains, with code examples, how to move columns using the column moving API.

  • Property Reference: This topic provides reference information on some of the properties of the Column Moving feature API of the igGrid.

Samples

The following sample provides additional information related to this topic.

  • Column Moving: This sample demonstrates configuring column moving in the igGrid.

View on GitHub