1
1
---
2
- title : Pin rows on top of the Grid
3
- description : Pin one or more rows on top of the Grid
2
+ title : Pin Rows at the Top of the Grid
3
+ description : Learn how to pin (freeze, lock) one or more rows at the top of the Grid, so that they don't scroll together with the other table rows.
4
4
type : how-to
5
- page_title : Pin rows on top of the Grid
6
- slug : grid-pin-rows
5
+ page_title : How to Pin Rows on top of the Grid
6
+ slug : grid-kb- pin-rows
7
7
position :
8
- tags : grid, pin, rows, sticky, frozen, locked
8
+ tags : blazor, grid, pin, sticky, freeze, lock
9
+ ticketid : 1676279
9
10
res_type : kb
10
11
---
11
12
@@ -22,11 +23,16 @@ res_type: kb
22
23
23
24
## Description
24
25
25
- I would like to pin one or more rows on top of the Grid so that they are always visible to the users.
26
+ This KB article answers the following questions:
27
+
28
+ * How to pin one or more rows on top of the Grid so that they are always visible to the users.
29
+ * How to lock Grid rows, so that they don't scroll with the other table rows?
30
+ * How to implement frozen rows at the top of the Grid?
31
+ * How to make some Grid rows stick to the top of the component's data area during scrolling?
26
32
27
33
## Solution
28
34
29
- To achieve the desired behavior you can:
35
+ To freeze Grid rows you can:
30
36
31
37
* Use the [ ` OnRead event ` ] ( slug://components/grid/manual-operations ) to place the row/rows on top of the data collection for the Grid.
32
38
* Use the [ ` OnRowRender event ` ] ( slug://grid-events#onrowrender ) to add a custom CSS class to the rows you want to pin.
@@ -172,4 +178,4 @@ function pinElements(pinCSSClass, rowHeight) {
172
178
element .style .top = index * rowHeight + " px"
173
179
});
174
180
}
175
- ````
181
+ ````
0 commit comments