Column Resizing (igGrid)

Topic Overview

Purpose

This topic explains the column resizing functionality of the igGrid™ control.

In this topic

This topic contains the following sections:

• Overview
  • Resizing Features
• Enabling Resizing
  • Requirements
  • Examples
• Client-Side Events
• Column Resizing Properties
• Related Topics

Overview

The column resizing functionality of the igGrid control allows the user to change the width of the grid’s columns. Resizing feature can be enabled on two levels – for the entire grid (default) and per column. You can however programmatically disable/enable resizing for individual columns.

Note: Column resizing is not supported on touch devices.

Resizing Features

• Enabling/disabling column resizing. This feature is managed through the allowResizing property.

• Enabling auto-sizing on double click – when enabled, resizes the column to the width of the widest cell content (including header and footer cells) that is currently visible. This feature is managed through the allowDoubleClickToResize option.

• Maximum/minimum column width – the minimum/maximum width to which the user can change the width of a column when performing resizing. This feature is managed through the minimumWidth/maximumWidth properties, respectively.

• Deferred resizing - resizing is deferred until the user finishes resizing or applied immediately. This feature is managed through the deferredResizing option.

• Configurable resizing handle – the width in pixels of the resizing handle on the right of each resizable column header can be customized. This feature is managed through the handleTreshold option.

• Column Key – specifies a column which will apply specified column settings. This feature is managed through the columnKey option.

• Column index - specifies a column which will apply specified column settings.This feature is managed through the columnIndex option.

Enabling Resizing

Following is a preview of the final result.

Requirements

Listing 1: Required CSS and JavaScript references you need to include in your application

In HTML:

<link type="text/css" href="infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script>
<script type="text/javascript" src="infragistics.lob.js"></script>

Listing 2: Minimal set of CSS and JavaScript references (not minified and combined) – needed only for resizing

In HTML:

<script type="text/javascript" src="infragistics.util.js"></script>
<script type="text/javascript" src="infragistics.util.jquery.js"></script>
<script type="text/javascript" src="infragistics.dataSource.js"></script>
<script type="text/javascript" src="infragistics.ui.shared.js"></script>
<script type="text/javascript" src="infragistics.ui.grid.framework.js"></script>
<script type="text/javascript" src="infragistics.ui.grid.resizing.js"></script>

Examples

Listing 3: Example igGrid code with column resizing enabled

In Javascript:

$("#grid1").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string" }
    ],
dataSource: adventureWorks,
    responseDataKey: 'Records',
    width: "800px",
    height:'400px',
    features: [
        {
            name : 'Resizing',
        }
    ]
});

In ASPX(MVC):

<%= Html.Infragistics().Grid(Model).ID("grid1").PrimaryKey("ProductID").Columns(column =>
    {
        column.For(x => x.ProductID).HeaderText("Product ID");
        column.For(x => x.Name).HeaderText("Product Name");
        column.For(x => x.ProductNumber).HeaderText("Product Number");
    }).Features(features => {
        features.Resizing();
    }).Height("400").Width("800").DataSourceUrl(Url.Action("ColumnResizingGetData"))
    .DataBind().Render()%>

Listing 4: Example grid code for disabling column resizing on a specific column

In Javascript:

$("#grid1").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string" }
    ],
    dataSource: adventureWorks,
    responseDataKey: 'Records',
    width: "800px",
    height:'400px',
    features: [
        {
            name : 'Resizing',
            columnSettings: [
                { columnKey: "ProductID", allowResizing: false }
            ],
        }
    ]
});

In C#:

<%=Html.Infragistics().Grid(Model).ID("grid1").PrimaryKey("ProductID")
    .Columns(column =>
        {
            column.For(x => x.ProductID).HeaderText("Product ID").Width("100px");
            column.For(x => x.Name).HeaderText("Product Name").Width("200px");
            column.For(x => x.ModifiedDate).HeaderText("Modified Date").Width("200px");
            column.For(x => x.ListPrice).HeaderText("List Price").Width("200px");
        })
    .Features(features => {
        features.Resizing().AllowDoubleClickToResize(true).DeferredResizing(true)
            .ColumnSettings(s =>
            {
                s.ColumnSetting().ColumnKey("ProductID").AllowResizing(false);
            });
    }).Height("500").DataSourceUrl(Url.Action("ColumnResizingGetData"))
    .DataBind().Render()%>

In ASPX(MVC):

<%= Html.Infragistics().Grid(Model).ID("grid1").PrimaryKey("ProductID").Columns(column =>
    {
        column.For(x => x.ProductID).HeaderText("Product ID");
        column.For(x => x.Name).HeaderText("Product Name");
        column.For(x => x.ProductNumber).HeaderText("Product Number");
    })
    .Features(features => {
        features.Resizing();
    }).Height("400").Width("800").DataSourceUrl(Url.Action("ColumnResizingGetData"))
    .DataBind().Render()%>

Client-Side Events

You can bind a handler to Reisizing in two ways, shown in Listing 5 and Listing 6, respectively.

Listing 5: Binding to client-side events from anywhere in your application

In Javascript:

    $("#grid1").bind("iggridresizingcolumnresizing", handler);

Listing 6: Binding to client-side events by specifying the event name as an option when you initialize the resizing feature (case sensitive)

In Javascript:

$("#grid1").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string" },
    ],
    width: '500px',
    dataSource: products,
    features: [
        {
            name: 'Resizing',
            columnResizing: handler
        }
    ]
});

//Handler code
function handler(event, args) {

}

Note: The columnResizing event is cancelable. In order to cancel a columnResizing event, its respective event handler must return false.

The grid column resizing functionality exposes the client-side events detailed in Table 1.

Table 1: Argument object definitions for the Resizing feature

Column Resizing Properties

The following table provides further details about the properties that manage the column resizing functionality.

Related Topics

Following are some other topics you may find useful.

• igGrid Overview
• igGrid Features