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.

jsx

    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.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Grid
• API Index of the Grid