Infragistics(R) IgniteUI
igGrid Column Resizing
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

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

In this topic

This topic contains the following sections:

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 Resizing

Preview

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

Event Name Argument (args) Parameters
columnResizing

columnIndex: Current selected grid column index

columnKey: Current selected grid column key

owner: Reference to the resizing widget object

desiredWidth: The desired width of the current selected column

columnResized

columnIndex: Current selected grid column index

columnKey: Current selected grid column key

owner: Reference to the resizing widget object

originalWidth: The original width of the current selected column

newWidth: The new width of the current selected column

Column Resizing Properties

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

Property Name Type and Default Value Description
allowDoubleClickToResize Boolean (default: True) Enables/disables Resize the column to the size of the longest currently visible cell value
deferredResizing Boolean (default: False) Specifies whether the resizing should be deferred until the user finishes resizing or the resizing should be applied immediately.
handleTreshold Int (default: 5) The width in pixels of the resizing handle which is position at the right side of each resizeable column header.

Related Topics

Following are some other topics you may find useful.