@model IEnumerable<FlexGridData.Sale>

<h1>
    CollectionView Paging
</h1>
<p>
    Paging is a common technique for dealing with large collections
    of data.
</p>

<h3>
    Client-Side Paging
</h3>
<p>
    The <b>CollectionView</b> class supports client-side paging
    by default. This enables you to generate grids and tables that contain
    only a reasonable amount of data. To enable paging, set the
    <b>pageSize</b> property and to select the page you want to display, 
    use the <b>moveToPage</b> method.
</p>
<p>
    For example:
</p>
@(Html.C1().FlexGrid().Id("theGrid")
    .ShowAlternatingRows(false)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .Bind(b=>b.Bind(Model).DisableServerRead(true))
    )
<div id="pager">
    <button id="btnFirst" class="btn"><span class="wj-glyph-step-backward"></span></button>
    <button id="btnPrev" class="btn"><span class="wj-glyph-left"></span></button>
    &nbsp;&nbsp;&nbsp;<span id="spanCurrent"></span>&nbsp;&nbsp;&nbsp;
    <button id="btnNext" class="btn"><span class="wj-glyph-right"></span></button>
    <button id="btnLast" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>

<h3>
    Server-Side Paging
</h3>
<p>
    Server-side paging consists of making requests that bring in
    one page of data at a time. The actual commands used to retrieve
    the data depend on the API exposed by the server.
</p>
<p>
   MVC Edition includes <b>CollectionViewService</b> that implements
    server-based paging (as well as sorting and filtering).
</p>
<p>
    For example:
</p>
@(Html.C1().FlexGrid().Id("theGridServer")
    .IsReadOnly(true)
    .ShowAlternatingRows(false)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .Bind(b => b.Bind(Model).PageSize(5))
)
<div id="pagerServer">
    <button id="btnFirstServer" class="btn"><span class="wj-glyph-step-backward"></span></button>
    <button id="btnPrevServer" class="btn"><span class="wj-glyph-left"></span></button>
    &nbsp;&nbsp;&nbsp;<span id="spanCurrentServer"></span>&nbsp;&nbsp;&nbsp;
    <button id="btnNextServer" class="btn"><span class="wj-glyph-right"></span></button>
    <button id="btnLastServer" class="btn"><span class="wj-glyph-step-forward"></span></button>
</div>