CollectionView Paging
Paging is a common technique for dealing with large collections of data.
Client-Side Paging
The CollectionView 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 pageSize property and to select the page you want to display, use the moveToPage method.
For example:
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
Page 1 of 40
Server-Side Paging
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.
MVC Edition includes CollectionViewService that implements server-based paging (as well as sorting and filtering).
For example:
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
Page 1 of 40
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | // This file locates: "Scripts/Lesson/C1Mvc/CVPaging.js". c1.documentReady(function () { var theGrid = wijmo.Control.getControl( '#theGrid' ); // a CollectionView with 5 items per page var view = theGrid.collectionView; view.pageSize = 5; view.pageChanged.addHandler(updateCurrentPage); // update pager status view.onPageChanged(); function updateCurrentPage() { var curr = wijmo.format( 'Page {index:n0} of {cnt:n0}' , { index: view.pageIndex + 1, cnt: view.pageCount }); document.getElementById( 'spanCurrent' ).textContent = curr; } // implement pager document.getElementById( 'pager' ).addEventListener( 'click' , function (e) { var btn = wijmo.closest(e.target, 'button' ); var id = btn ? btn.id : '' ; switch (id) { case 'btnFirst' : view.moveToFirstPage(); break ; case 'btnPrev' : view.moveToPreviousPage(); break ; case 'btnNext' : view.moveToNextPage(); break ; case 'btnLast' : view.moveToLastPage(); break ; } }); // use server-based paging var theGridServer = wijmo.Control.getControl( '#theGridServer' ); var viewServer = theGridServer.collectionView; viewServer.pageChanged.addHandler(updateCurrentPageServer); // update pager status viewServer.onPageChanged(); function updateCurrentPageServer() { var curr = wijmo.format( 'Page {index:n0} of {cnt:n0}' , { index: viewServer.pageIndex + 1, cnt: viewServer.pageCount }); document.getElementById( 'spanCurrentServer' ).textContent = curr; } // implement pager document.getElementById( 'pagerServer' ).addEventListener( 'click' , function (e) { var btn = wijmo.closest(e.target, 'button' ); var id = btn ? btn.id : '' ; switch (id) { case 'btnFirstServer' : viewServer.moveToFirstPage(); break ; case 'btnPrevServer' : viewServer.moveToPreviousPage(); break ; case 'btnNextServer' : viewServer.moveToNextPage(); break ; case 'btnLastServer' : viewServer.moveToLastPage(); break ; } }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1MvcController : Controller { // GET: CVPaging public ActionResult CVPaging() { return View(Models.FlexGridData.GetSales(200)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | @model IEnumerable< FlexGridData.Sale > < h1 > @Html .Raw(Resources.C1Mvc.CVPaging_Title) </ h1 > < p > @Html .Raw(Resources.C1Mvc.CVPaging_Text1) </ p > < h3 > @Html .Raw(Resources.C1Mvc.CVPaging_Title1) </ h3 > < p > @Html .Raw(Resources.C1Mvc.CVPaging_Text2) </ p > < p > @Html .Raw(Resources.C1Mvc.CVPaging_Text3) </ 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 > < span id = "spanCurrent" ></ span > < 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 > @Html .Raw(Resources.C1Mvc.CVPaging_Title2) </ h3 > < p > @Html .Raw(Resources.C1Mvc.CVPaging_Text4) </ p > < p > @Html .Raw(Resources.C1Mvc.CVPaging_Text5) </ p > < p > @Html .Raw(Resources.C1Mvc.CVPaging_Text6) </ 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 > < span id = "spanCurrentServer" ></ span > < 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 > |