You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: knowledge-base/grid-virtualization-many-records.md
+37-1Lines changed: 37 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,8 +28,17 @@ I cannot see all records in the grid with virtual scrolling when there are many
28
28
29
29
I cannot scroll to the end of the records when I have many records.
30
30
31
+
Other symptoms can include the grid content overflowing its parent and hiding content after the grid, or you could see a border from the grid near the end of the scrollable container.
32
+
33
+
In this article:
34
+
35
+
*[Steps to Reproduce](#steps-to-reproduce)
36
+
*[Cause\Possible Cause(s)](#causepossible-causes)
37
+
*[Solution](#solution)
38
+
31
39
## Steps to Reproduce
32
-
Sample reproducible - try dragging the scrollbar to the end - you won't see record number 1 000 000
40
+
41
+
>caption Sample reproducible - try dragging the scrollbar to the end - you won't see record number 1 000 000
33
42
34
43
````CSHTML
35
44
Total items: @GridData.Count
@@ -75,6 +84,31 @@ Total items: @GridData.Count
75
84
}
76
85
````
77
86
87
+
The issue with the content overflow is the same - when the element size limit is reached, the browser does not render the element correctly and it overflows its parent.
88
+
89
+
>caption Overflowing content due to browser element size limit (see additional code below)\
90
+
91
+

92
+
93
+
>caption Add this code just after the grid closing tag to color the element borders like in the image above to see the issue
94
+
95
+
````CSHTML
96
+
</TelerikGrid>
97
+
98
+
something after the grid that I can't see because of the grid issue
99
+
100
+
<style>
101
+
.k-grid {
102
+
border: 2px solid red !important;
103
+
}
104
+
105
+
.k-grid-container {
106
+
border: 1px solid blue !important;
107
+
}
108
+
</style>
109
+
````
110
+
111
+
78
112
## Cause\Possible Cause(s)
79
113
Browsers have a limitation on how large (tall or wide) an element can be. This limits how much data you can fit and how far the user can scroll.
80
114
@@ -88,5 +122,7 @@ Thus, the scrollbar can only get so small, and you can only scroll to a certain
88
122
89
123

90
124
125
+
126
+
91
127
## Solution
92
128
The only possible solution if you have so many records is to use the standard [paging]({%slug components/grid/features/paging%}).
0 commit comments