Creating Fixed Headers on Scroll

Environment

Product

Grid for Progress® Telerik® UI for UI for ASP.NET Core

Description

How can I create fixed headers on scroll in the Grid for UI for ASP.NET Core?

Solution

To create fixed headers on scroll, apply the following CSS rule:

style.css

<style>
    #second > table > thead,
    #first > table > thead {
        position: sticky;
        top: 0;
    }
</style>

Index.cshtml

    @(Html.Kendo().Grid<GridFixedHeaders.Models.OrderViewModel>()
        .Name("first")
        .Columns(columns => {
            columns.Bound(p => p.OrderDate);
            columns.Bound(o => o.ShipName).Width(200);
            columns.Bound(p => p.Freight).Width(200);
            columns.Bound(p => p.OrderDate).Format("{0:dd/MM/yyyy}");
        })
        .Pageable(pageable => pageable.ButtonCount(5))
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple))
        .PersistSelection(true)
        .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Model(model => model.Id(p => p.OrderID))
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
    )

    <br />
    <br />

    @(Html.Kendo().Grid<GridFixedHeaders.Models.OrderViewModel>()
        .Name("second")
        .Columns(columns => {
            columns.Bound(p => p.OrderDate);
            columns.Bound(p => p.Freight).Width(200);
            columns.Bound(o => o.ShipName).Width(200);
            columns.Bound(p => p.OrderDate).Format("{0:dd/MM/yyyy}");
        })
        .Pageable(pageable => pageable.ButtonCount(5))
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Cell))
        .Navigatable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
    )

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base