Virtualization

The main job of FlexGrid is to convert JavaScript data objects into DOM elements that user can interact with. In many cases, the data consists of large arrays with many thousands of items. Creating DOM elements for each of these items would make for large and slow pages.

Virtualization is the process of keeping track of visible portions of the data and rendering only those parts. This reduces the number of DOM elements in the document tree and improves performance dramatically.

FlexGrid exposes visible part of the data through the viewRange property. Whenever user resizes the screen or scrolls the grid, viewRange is updated which updates the child DOM elements of the grid.

The sample below uses the viewRange property to implement a simple type of 'infinite scrolling'. When the user scrolls to the bottom of the grid, the code adds items to the grid's itemsSource.

If you inspect the DOM, you will notice that no matter how large the itemsSource gets, the number of DOM elements remains constant. The data is 'virtualized'.

The grid now has rows and cell elements.

// This file locates: "Scripts/Lesson/C1FlexGrid/Virtualization.js".
c1.documentReady(function () {
    // start with a small data set
    var data = getData(100);

    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.updatedView.addHandler(function(s, e) {
        rowCount.textContent = s.rows.length;
        cellCount.textContent = s.hostElement.querySelectorAll('.wj-cell').length;
    });
    theGrid.scrollPositionChanged.addHandler(function (s, e) {

        // if we're close to the bottom, add 20 items
        if (s.viewRange.bottomRow >= s.rows.length - 1) {
            addData(data, 20);
            s.collectionView.refresh();
        }
    });
    theGrid.itemsSource = data;

    // get an array with random data
    function getData(cnt, start) {
        var data = [];
        var countries = 'USA,Germany,UK,Japan,Italy,Greece'.split(',');
        if (!start) start = 0;
        for (var i = 0; i < cnt; i++) {
            data.push({
                id: i + start,
                country: countries[i % countries.length],
                date: new Date(2014, i % 12, i % 28),
                amount: Math.random() * 10000,
                active: i % 4 === 0
            });
        }
        return data;
    }

    // add random data to an array
    function addData(data, cnt) {
        var more = getData(cnt, data.length);
        for (var i = 0; i < more.length; i++) {
            data.push(more[i])
        }
    }
});
// This file locates: "Content/css/Lesson/C1FlexGrid/Virtualization.css".
#rowCount, #cellCount {
   font-weight: bold;
 }
using System.Web.Mvc;

namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Virtualization
        public ActionResult Virtualization()
        {
            return View();
        }
    }
}
@model IEnumerable<FlexGridData.Sale>

<h1>
    @Html.Raw(Resources.C1FlexGrid.Virtualization_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Virtualization_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Virtualization_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Virtualization_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Virtualization_Text4)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Virtualization_Text5)
</p>

@Html.C1().FlexGrid().Id("theGrid").Height(250)
<p>
    @Html.Raw(Resources.C1FlexGrid.Virtualization_Text6)
</p>