Enabling Column Moving (igGrid)

Topic Overview

Purpose

This topic explains, with code examples, how to enable 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.

In this topic

This topic contains the following sections:

• Column Moving – Conceptual Overview
• Column Moving – Code Examples
  • Enabling Column Moving in JavaScript (Code Example)
  • Enabling Column Moving in ASP.NET MVC (Code Example)
• Related Content
  • Topics
  • Samples

Column Moving – Conceptual Overview

The igGrid does not support column moving by default, so you need to enable it explicitly. This is done differently in JavaScript and ASP.NET MVC.

Column Moving – Code Examples

The following lists the code examples included in this topic.

• Enabling Column Moving in JavaScript: This example demonstrates enabling the igGrid’s Column Moving feature with default configuration in JavaScript.

• Enabling Column Moving in ASP.NET MVC: This example demonstrates enabling the igGrid Column Moving feature with default configuration in ASP.NET MVC.

Enabling Column Moving in JavaScript (Code Example)

The following code creates an igGrid instance bound to the Products table data from the AdventureWorks database. The columns are auto-generated. Column Moving is enabled with its default configuration.

In JavaScript:

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

Enabling Column Moving in ASP.NET MVC (Code Example)

The following code creates igGrid instance bound to a custom Product object collection defined as a View model. The columns are auto-generated. Column Moving s enabled with its default configuration.

In C#:

Code
@model IQueryable<Sample.Models.Product>
@(Html.Infragistics()
    .Grid(Model)
    .AutoGenerateColumns(true)
    .Features(feature =>
    {
        feature.ColumnMoving();
    })
    .DataBind()
    .Render())

Related Content

Topics

The following topics provide additional information related to this topic.

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

• 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.