11---
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.
44type : 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
77position :
8- tags : grid, pin, rows, sticky, frozen, locked
8+ tags : blazor, grid, pin, sticky, freeze, lock
9+ ticketid : 1676279
910res_type : kb
1011---
1112
@@ -22,11 +23,16 @@ res_type: kb
2223
2324## Description
2425
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?
2632
2733## Solution
2834
29- To achieve the desired behavior you can:
35+ To freeze Grid rows you can:
3036
3137* Use the [ ` OnRead event ` ] ( slug://components/grid/manual-operations ) to place the row/rows on top of the data collection for the Grid.
3238* 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) {
172178 element .style .top = index * rowHeight + " px"
173179 });
174180}
175- ````
181+ ````
0 commit comments