Enabling and Configuring Virtualization (igGrid)

Topic Overview

Purpose

This topic explains, with code examples, how to enable and configure the Virtualization feature in the igGrid™.

In this topic

This topic contains the following sections:

• Configuring Virtualization Overview
• Enabling and Configuring Fixed Row Virtualization
  • Configuring the rows’ height
  • Fixed Row Virtualization Example
• Enabling and Configuring Column Virtualization
  • Configuring the columns’ width
  • Column Virtualization Example
• Enabling and Configuring Continuous Row Virtualization
  • Property settings
  • Example
• Related Content
  • Topics

Configuring Virtualization Overview

The following table lists the different configurable settings of the Virtualization feature and maps them to the respective properties that manage them.

Enabling and Configuring Fixed Row Virtualization

Fixed Row Virtualization is enabled by setting the rowVirtualization option of the igGrid control to true.

It requires the following additional options to be set:

• height
• avgRowHeight

When Fixed Row Virtualization is used, all rows have the same height. That height is determined by the avgRowHeight option. Please refer to the 'Configuring the average rows’ height' section for more details on how this option should be calculated. Note that if average row height is not set correctly, the last rows may be cut off (not shown) in the grid.

Configuring the average rows’ height

An important aspect of configuring Fixed Virtualization is the process of determining the value for the avgRowHeight property. The avgRowHeight property determines the average height of the displayed rows in the grid. The general rule for setting this option is to always set an avgRowHeight to value that is evenly divisible by the value of the height of the grid. By default, the grid sets a row height of "30px" that would work for most data sources, however a greater avgRowHeight value may have to be set in order to accommodate word wrapping.

Example:

Grid Height: 600px => avgRowHeight: 30, or 15, or 60.

Fixed Row Virtualization Example

The following table demonstrates how to configure Fixed Row Virtualization.

Code

The following code configures the setting in the Example.

In JavaScript:

$("#grid1").igGrid({
        rowVirtualization: true,
        virtualizationMode: "fixed",
        height: "600px",
        avgRowHeight: "30px"
});

In ASPX:

<%=Html.Infragistics().Grid(Model).ID("grid1")
    .LoadOnDemand(false)
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .PrimaryKey("ProjectID")
    .Columns(column => 
    {
        column.For(x => x.ProjectID).HeaderText("ProjectID");
        column.For(x => x.Name).HeaderText("Name");
        column.For(x => x.StartDate).HeaderText("StartDate");
        column.For(x => x.EndDate).HeaderText("EndDate");
    })
    .Height("600px")
    .RowVirtualization(true)
    .VirtualizationMode(VirtualizationMode.Fixed)
    .AvgRowHeight("30px")
}).DataBind().Render() %>

The sample below demonstrates how the fixed virtualization works:

Enabling and Configuring Column Virtualization

Column Virtualization is enabled by setting the columnVirtualization option of the igGrid control to true. When enabled it also enables Fixed Row Virtualization.

It requires the following additional options to be set:

• width
• defaultColumnWidth or column width for each column.
• avgColumnWidth
• height (due to auto enabling row virtualization)
• avgRowHeight (due to auto enabling row virtualization)

When Column Virtualization is enabled the sum of the visible column widths should be equal to the grid width so that the current visible columns are fully visible in the viewport. The avgColumnWidth option should also be calculated and set in order for the horizontal scrollbar width to be correct and to allow scrolling to the last visible column. Next section explains how to calculate avgColumnWidth option.

Configuring the average columns' width

The avgColumnWidth option determines the average width of the columns defined in the grid. This option should be set to the average width of the columns in the current grid configuration in pixels.

Example:

Grid Width: 300px, example column widths for 4 columns: 100px, 200px, 100px, 200px => avgColumnWidth: 150

Column Virtualization Example

The following table demonstrates how to configure Column Virtualization.

Note: Note that instead of defaultColumnWidth you can instead define specific width for each column.

Code

The following code configures the setting in the Example.

In JavaScript:

$("#grid1").igGrid({
        columnVirtualization: true,
        width: "400px",
        height: "600px",
        defaultColumnWidth: "200px",
        avgColumnWidth: "200px",
        avgRowHeight: "30px"        
});

In ASPX:

<%=Html.Infragistics().Grid(Model).ID("grid1")
    .LoadOnDemand(false)
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .PrimaryKey("ProjectID")
    .Columns(column => 
    {
        column.For(x => x.ProjectID).HeaderText("ProjectID");
        column.For(x => x.Name).HeaderText("Name");
        column.For(x => x.StartDate).HeaderText("StartDate");
        column.For(x => x.EndDate).HeaderText("EndDate");
    })
    .Width("400px")
    .Height("600px")
    .DefaultColumnWidth("200px")
    .ColumnVirtualization(true)
    .AvgRowHeight("30px")
    .AvgColumnWidth("200px")
}).DataBind().Render() %>

As a result you'll have only two columns rendered in the grid viewport.

Enabling and Configuring Continuous Virtualization

Continuous Virtualization is enabled by setting the rowVirtualization option of the igGrid control to true and virtualizationMode to "continuous".

It requires the following additional options to be set:

• height

Note: Column Virtualization is not supported with Continuous Virtualization.

Example

The following table demonstrates how to configure Continuous Virtualization for both rows and columns with row height of 400 pixels.

Code

The following code configures the setting in the Example.

In JavaScript:

$("#grid1").igGrid({
        rowVirtualization: true,
        virtualizationMode: "continuous",
        height: "400px"
});

In ASPX:

<%=Html.Infragistics().Grid(Model).ID("grid1")
    .LoadOnDemand(false)
    .AutoGenerateColumns(false)
    .AutoGenerateLayouts(false)
    .PrimaryKey("ProjectID")
    .Columns(column => 
    {
        column.For(x => x.ProjectID).HeaderText("ProjectID");
        column.For(x => x.Name).HeaderText("Name");
        column.For(x => x.StartDate).HeaderText("StartDate");
        column.For(x => x.EndDate).HeaderText("EndDate");
    })
    .RowVirtualization(true)
    .VirtualizationMode(VirtualizationMode.Continuous)
    .Height("400px")
    .DataBind().Render()
 %>

The sample below demonstrates how the continuous virtualization works:

Related Content

Topics

The following topics provide additional information related to this topic.

• Virtualization Overview: This topic introduces the Virtualization feature of the igGrid control.
• Feature Compatibility Matrix (igGrid): This topic shows the compatibility between igGrid features when enabled at the same time.