Configuring Column Fixing (igGrid)

Topic Overview

Purpose

This topic explains, with code examples how to configure Column Fixing feature of the igGrid™ control including the position of the Fixed Columns area, the initial column fix state, and the minimum Unfixed Columns area width.

Required background

The following topics are prerequisites to understanding this topic:

• igGrid Overview: This topic provides a conceptual overview of the igGrid control and its features explains, with code examples, how to add it to an HTML page.

• igGrid/igDataSource Architecture Overview: This topic explains the inner workings of the igGrid control and its interaction with the data source component (igDataSource™).

• Column Fixing Overview (igGrid): This topic provides conceptual overview of the igGrid Column Fixing feature including the supported user interactions and the main configuration options.

• Enabling Column Fixing (igGrid): This topic explains, with code examples, how to enable the Column Fixing feature of the igGrid in both JavaScript and ASP.NET MVC.

In this topic

This topic contains the following sections:

• Column Fixing Configuration Summary
• Configuring the Column Fixing Direction
  • Property settings
  • Example: Configure fixing direction on the right
• Configuring the Column Initial Fixed State
  • Overview
  • Property settings
  • Example
• Disabling Column Fixing for a Column
  • Overview
  • Property settings
  • Example
• Configuring the non-fixable column area minimal width
  • Property settings
  • Example
• Related Content
  • Topics
  • Samples

Column Fixing Configuration Summary

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

Configuring the Placement of the Fixed Columns in the Grid

By default, the fixed columns (the Fixed Columns area) are placed on the left and the non-fixed columns (i.e. the Non-Fixed Columns area) – on the right. You can swap the positions of the fixed and unfixed columns (resulting with the fixed columns are placed on the right and the non-fixed columns – on the left).

The placement of the Fixed Columns and Non-Fixed columns areas relative to each other is managed by the fixingDirection property of the Column Fixing feature.

Property settings

The following table maps the desired configuration to property settings.

Example

The screenshot below demonstrates the Fixed Columns area placed in the right-hand side of the grid as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnFixing",
            fixingDirection: "right"
        }
    ]
});

In ASPX:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnFixing().FixingDirection(ColumnFixingDirection.Right))
.DataBind()
.Render())

Configuring the Initial Fix State of a Column

Overview

You can specify which columns to be fixed upon the initial initialization of the grid and which to be non-fixed. By default, all columns are initially non-fixed. Configuring initial fixed columns is done on each column individually.

To fix a column upon the initial initialization of the grid, you need to specify the column (through a column identifier – either the column key or the column index) and set the isFixed property to true:

• In JavaScript –set the columnSettings property of the Column Fixing feature to an array the objects of which consist of the column identifier and the setting of the isFixed property for that column.
• In ASP.NET MVC – when configuring the grid in the View with the chaining method, use the ColumnSettings method of the Column Fixing feature.

When Column Fixing is disabled for a column, the column header pin button for that column is hidden.

Property settings

The following table lists the properties and their settings that enable the initial column fixing.

Example

The screenshot below demonstrates the Product Name column (with column key “Name”) configured as fixed upon igGrid’s initialization as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

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

In ASPX:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => 
    f.ColumnFixing()
    .ColumnSettings(cs => cs.ColumnSetting().ColumnKey("Name").IsFixed(true)))
.DataBind()
.Render())

Disabling Column Fixing for a Column

Overview

You can specify which columns the user should be allowed to fix and which – should not. By default, Column Fixing is enabled for all columns in the grid. Disabling Column Fixing is done on each column individually.

To disable fixing a column, you need to specify the column (through a column identifier – either the column key or the column index)) and set the allowFixing property to false:

• In JavaScript –set the columnSettings property of the feature to an array the objects of which consist of the column identifier and the setting of the allowFixing property for that column.
• In ASP.NET MVC – when configuring the grid in the View with the chaining method, use the ColumnSettings of the Column Fixing feature.

When Column Fixing is disabled for a column, the column header pin button for that column is hidden.

Property settings

The following table lists the properties and their settings that disable Column Fixing for a column.

Example

The screenshot below demonstrates Column Fixing being disabled for the Product Name column (with column key “Name”) as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

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

In ASPX:

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

Configuring the Minimum Width of the Non-Fixed Columns Area

The Non-Fixed Columns area has a horizontal scrollbar and automatically shrinks when a column is fixed. As a result, the Non-Fixed Columns area can become very thin, so, as a precaution, a minimum threshold width can be configured for it to preserve the operation ability of the scrollbar for the user. When the minimum threshold width is reached, a columnFixingRefused event is raised to indicate that no more columns can be fixed until some of the already fixed columns are unfixed.

Property settings

The following table maps the desired configuration to property settings.

Example

The screenshot below demonstrates what the minimum width of the Non-Fixed Columns area looks like as a result of the following settings:

Following is the code that implements this example.

In JavaScript:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnFixing",
            minimalVisibleAreaWidth: 100
        }
    ]
});

In ASPX:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnFixing().MinimalVisibleAreaWidth(100)
.DataBind()
.Render())

Related Content

Topics

The following topics provide additional information related to this topic.

• Method Reference (Column Fixing, igGrid): This topic provides reference information about the methods related to the Column Fixing feature of the igGrid control.

Samples

The following samples provide additional information related to this topic.

• Column Fixing: This sample demonstrates the basic functionalities of the igGrid’s Column Fixing feature – setting columns fixed by default and preventing columns from being fixed by the user.