This topic explains the column resizing functionality of the igGrid
™ control.
This topic contains the following sections:
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.
-
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.
Following is a preview of the final result.
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>
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()%>
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 acolumnResizing
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
<th>
Argument (args) Parameters
<tr>
<td>
<td>
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
<tr>
<td>
<td>
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
Event Name |
---|
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. |
Following are some other topics you may find useful.