@model IEnumerable<FlexGridData.Sale>

<h1>
    Virtualization
</h1>
<p>
    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.
</p>
<p>
    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.
</p>
<p>
    FlexGrid exposes visible part of the data through
    the <b>viewRange</b> property. Whenever user resizes
    the screen or scrolls the grid, <b>viewRange</b> is
    updated which updates the child DOM elements of the grid.
</p>
<p>
    The sample below uses the <b>viewRange</b> 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 <b>itemsSource</b>.
</p>
<p>
    If you inspect the DOM, you will notice that no matter how
    large the <b>itemsSource</b> gets, the number of DOM elements
    remains constant. The data is 'virtualized'.
</p>

@Html.C1().FlexGrid().Id("theGrid").Height(250)
<p>
    The grid now has <span id='rowCount'></span> rows and
    <span id='cellCount'></span> cell elements.
</p>