Version

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

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

Setting Property Description
Row virtualization rowVirtualization Enables/Disables virtualization for rows only.
Column virtualization columnVirtualization Enables/Disables Column Virtualization. Column Virtualization depends on Fixed Row Virtualization and will enable it implicitly if it is not enabled explicitly.
Both Row and Column virtualization virtualization Shorthand for setting rowVirtualization and columnVirtualization via a single option.
Virtualization mode virtualizationMode Determines Row Virtualization mode.
Average Row Height avgRowHeight Used for Fixed Row Virtualization. Determines the average value in pixels that will be used to calculate how many rows to render. All row heights will be automatically set to this value.
Average Column Width avgColumnWidth Used for Column Virtualization. This is the average value in pixels for the column widths.

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:

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.

Property Value
rowVirtualization true
virtualizationMode (Optional) "fixed" (Default value)
height "600px"
avgRowHeight (Optional) "30px" (Default value)

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:

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.

Property Value
columnVirtualization true
virtualizationMode (Optional) "fixed" (Default Value)
width "400px"
defaultColumnWidth "200px"
avgColumnWidth "200px"
height "600px"
avgRowHeight (Optional) "30px" (Default Value)

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:

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.

Property Value
rowVirtualization true
virtualizationMode "continuous"
height "400px"

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.

View on GitHub