New to KendoReact? Start a free 30-day trial

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:

  1. Use the cellRender prop of the Grid to add the k-grid-row-sticky class and the style top to 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;
    }
  1. Set rowHeight to the Grid as the locked rows require fixed 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
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?