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
• Configuring the Column Moving Mode
  • Property settings
  • Example
• Configuring the Column Moving Type
  • Property settings
  • Example
• Disabling Column Moving for a Column
  • Overview
  • Property settings
  • Disabling Column Moving for a column in JavaScript
  • Disabling Column Moving for a column in MVC
  • Example
• Disabling the Column Moving Interface
  • Overview
  • Property settings
  • Example
• Related Content
  • Topics
  • Samples

Column Moving Configuration Summary

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

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.

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.

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:

• 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. For details, see the Disabling Column Moving for a column in JavaScript block.

• In ASP.NET MVC – when configuring the grid in the View with the chaining method, use the feature’s ColumnSettings method. For details, see the Disabling Column Moving for a column in MVC block.

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.

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.

Example

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

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.