New to Telerik UI for ASP.NET Core? Download free 30-day trial

Create 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

In order to create fixed headers on scroll, apply the following CSS rule :

<style>
    #second > table > thead,
    #first > table > thead {
        position: sticky;
        top: 0;
    }
</style>
    @(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"))
        )
    )
In this article