FlexGrid with Sticky Headers

The stickyHeaders property is used to keep the grid's column headers visible while the user scrolls the document. It works whether the grid is hosted directly in the document body or in other scrollable elements.

Scroll the document up and down and notice how the column headers remain visible on the first grid:

Sticky Headers in Scrollable Elements

The stickyHeaders property also works when the grid is hosted in other scrollable elements. Scroll the panel below and notice how the column headers remain visible on the first grid:

Sticky Toolbars

You can extend the sticky behavior to other elements by adding them to the grid's element tree and updating their style when the grid layout is updated.

For example, this grid has a sticky toolbar element that remains visible when the page scrolls:

This is the code that creates the sticky toolbar:

// initialize grid's sticky toolbar
$scope.init = function (s, e) {

    // move header element into grid layout
    var host = s.hostElement,
        hdr = document.querySelector('.grid-header');
    hdr.style.position = 'relative';
    hdr.style.zIndex = 10;
    host.insertBefore(hdr, host.children[0]);

    // make header 'sticky'
    var sticky = s.columnHeaders.hostElement.parentElement;
    s.updatedLayout.addHandler(function () {
        hdr.style.top = sticky.style.top;
        wijmo.toggleClass(hdr, 'wj-state-sticky', wijmo.hasClass(sticky, 'wj-state-sticky'));
    });
};
        

Some dummy text to make the page scrollable...

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.