Scrolling and ViewRange
When user selects a cell using mouse or keyboard, FlexGrid automatically ensures that it is visible by calling the scrollIntoView method.
The scrollIntoView method causes the grid to scroll so that the requested cell is within the current viewRange. The grid will scroll the minimum amount needed to show the cell, so it may become visible at the top, middle, or bottom of the view range.
If you want to show a specific row at the top of the view range, you need a slightly different approach. Get the bounding rectangle of the cell you want to show to the top and use the coordinates to set the grid's scrollPosition property.
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
5
Greece
Computers
6,073
86,237.02
49,767.35
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
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 | // This file locates: "Scripts/Lesson/C1FlexGrid/ScrollingViewRange.js".c1.documentReady(function () { var theGrid = wijmo.Control.getControl('#theGrid'); // scroll into view document.getElementById('scrollIntoView').addEventListener('click', function () { theGrid.scrollIntoView(100, -1); }); // set top cell document.getElementById('scrollToTop').addEventListener('click', function () { if (true) { // get cell rect, adjust scrollPosition.y to bring it to the top var rc = theGrid.cells.getCellBoundingRect(100, 0, true); theGrid.scrollPosition = new wijmo.Point(theGrid.scrollPosition.x, -rc.top); } else { // simpler but less efficient (requires a timeOut) theGrid.scrollIntoView(theGrid.rows.length - 1, -1); setTimeout(function () { theGrid.scrollIntoView(100, -1); }) } });}); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1FlexGridController : Controller { // GET: ScrollingViewRange public ActionResult ScrollingViewRange() { 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 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1FlexGrid.ScrollingViewRange_Title)</h1><p> @Html.Raw(Resources.C1FlexGrid.ScrollingViewRange_Text1)</p><p> @Html.Raw(Resources.C1FlexGrid.ScrollingViewRange_Text2)</p><p> @Html.Raw(Resources.C1FlexGrid.ScrollingViewRange_Text3)</p><p> @Html.Raw(Resources.C1FlexGrid.ScrollingViewRange_Text4)</p><button id="scrollIntoView" class="btn btn-default"> @Html.Raw(Resources.C1FlexGrid.ScrollingViewRange_Text5)</button><button id="scrollToTop" class="btn btn-default"> @Html.Raw(Resources.C1FlexGrid.ScrollingViewRange_Text6)</button>@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(200) |