Infragistics(R) IgniteUI
Configuring Column Moving (igGrid)
E-mail your feedback on this topic.

Glossary Item Box

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:

Topic

Purpose

This topic explains conceptually the Column Moving feature of the igGrid, and the functionalities this feature provides.

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


In this topic


Column Moving Configuration Summary

Column Moving configuration summary chart

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

Overview

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

“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 ASPX:

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

Configuring the Column Moving Type

Overview

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

"render"

Configure DOM Manipulation type

dom

Example

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

In JavaScript:

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

In ASPX:

@(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

or

respectively, either

  • the key of the column

or

  • the index number of the column
  • 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:

Property

Value

"Name"
false

In JavaScript:

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

In ASPX:

@(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 this property:

And set it to:

Disable column moving interface

false

Example

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

Property

Value

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 ASPX:

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

Topic

Purpose

This topic explains how to move columns in code using the Column Moving feature API.

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


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

This sample demonstrates configuring of the igGrid Column Moving feature.

This sample demonstrates the Column Moving API of the igGrid.