Locked Rows
You can lock (pin) rows at the top of the Grid data rows to make them always visible during scrolling.
Setup
Pinning rows requires the followings steps:
- Use the
cellRenderprop of the Grid to add thek-grid-row-stickyclass and the styletopto the rows that will be locked.
cellRender = (td, props) => {
let extraProps = {};
if(props.dataItem.locked){
extraProps.style = {
top: getTop(props.dataItem, products),
...props.style
},
extraProps.className = props.className + ' k-grid-row-sticky'
}
return React.cloneElement(td, { ...td.props, ...extraProps }, td.props.children)
}
const getTop = (dataItem, data) => {
const allLockedRows = filterBy(data,filterDescriptorLocked);
const indexOfLockedItem = allLockedRows.findIndex(item=> dataItem.ProductID === item.ProductID);
return indexOfLockedItem * rowHeight;
}- Set
rowHeightto the Grid as the locked rowsrequirefixed equal height of all rows in order to correctly calculate their position.
In the following example we use a custom cell to dynamically lock a row by clicking over the cell.
Example
View Source
Change Theme:
