Enabling Column Fixing (igGrid)

Topic Overview

Purpose

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

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.

In this topic

This topic contains the following sections:

• Enabling Column Fixing – Conceptual Overview
  • Enabling Column Fixing summary chart
• Code Examples
  • Code Example: Enabling Column Fixing in JavaScript
  • Code Example: Enabling Column Fixing in ASP.NET MVC
• Related Content
  • Topics
  • Samples

Enabling Column Fixing – Conceptual Overview

The Column Fixing feature of the igGrid control is not enabled by default, so you need to enable it explicitly. This is done differently in JavaScript and ASP.NET MVC (See Column Fixing summary chart.).

Enabling Column Fixing summary chart

The following table summarizes enabling Column Fixing for both JavaScript and ASP.NET MVC. For details, see Column Fixing – Code Examples.

Code Examples Summary

The following lists the code examples included in this topic.

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

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

Code Example: Enabling Column Fixing in JavaScript

Description

The following code creates an igGrid instance bound to the Products table data from the AdventureWorks database. The columns are auto-generated and default column width is set. Width and height are defined. Column Fixing is enabled with its default configuration.

Code

Following is the code that implements this example.

In JavaScript:

$("#grid1").igGrid({
    dataSource: adventureWorks,
    defaultColumnWidth: "100px",
    width: "600px",
    height: "500px",
    features: [
        {
            name: "ColumnFixing"
        }
    ]
});

Code Example: Enabling Column Fixing in ASP.NET MVC

Description

The following code creates igGrid instance bound to a custom Product object collection defined as a View model. The columns are auto-generated and default column width is set. Width and height are defined. Column Fixing is enabled with its default configuration.

Code

Following is the code that implements this example.

In C#:

@model IQueryable<Sample.Models.Product>
@(Html.Infragistics()
    .Grid(Model)
    .DefaultColumnWidth("100px")
    .Width("600px")
    .Height("500px")
    .Features(feature =>
    {
        feature.ColumnFixing();
    })
    .DataBind()
    .Render())

Related Content

Topics

The following topics provide additional information related to this topic.

• Configuring Column Fixing (igGrid): 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 Non-Fixed Columns area width.

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