Skip to content

Commit 8310a3f

Browse files
chore(kb): update browser issues for virtualization limitation
1 parent 8520275 commit 8310a3f

File tree

2 files changed

+37
-1
lines changed

2 files changed

+37
-1
lines changed

knowledge-base/grid-virtualization-many-records.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,17 @@ I cannot see all records in the grid with virtual scrolling when there are many
2828

2929
I cannot scroll to the end of the records when I have many records.
3030

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+
3139
## 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
3342
3443
````CSHTML
3544
Total items: @GridData.Count
@@ -75,6 +84,31 @@ Total items: @GridData.Count
7584
}
7685
````
7786

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+
![the content can overflow and hide adjacent elements when the element size limit is reached](images/virtualization-max-browser-height-overflow-issue.png)
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+
78112
## Cause\Possible Cause(s)
79113
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.
80114

@@ -88,5 +122,7 @@ Thus, the scrollbar can only get so small, and you can only scroll to a certain
88122
89123
![browser limitation of element height limits the number of records the grid can show with virtualization](images/virtualization-max-browser-height.png)
90124

125+
126+
91127
## Solution
92128
The only possible solution if you have so many records is to use the standard [paging]({%slug components/grid/features/paging%}).
27.8 KB
Loading

0 commit comments

Comments
 (0)