How to freeze column header in KendoMVC Grid?

Question

I have kendo MVC Grid and I have to set my page size to 50, so I need to freeze the column header while scrolling.

The question is : How can I freeze the column header while scrolling ?

Answer 1

When you create the Grid you should define the height in pixels as well as define scrollable as true.

Example:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    scrollable: true,
    height    : "150px",
    columns   : [
        ...
    ]
});

See this working here : http://jsfiddle.net/OnaBai/uuPW5/

Answer 2

Maybe this is something you were looking for:

https://github.com/jmosbech/StickyTableHeaders

Works quite well and you don't have to have scrollbars in your grid which makes it easier to work with.

You simply link provided script to your view and call this method on load:

$('#grid').stickyTableHeaders({
    cacheHeaderHeight: true,
    leftOffset: 1,
    fixedOffset: ...
});

Parameters are optional but cacheHeaderHeight improves performance and I had to add leftOffset because of custom grid header borders and fixedOffset because of other sticky elements.

Answer 3

Just set the css of the grid header like this :

.k-grid-header {
   position: sticky;
   top: 0;
}

Answer 4

This answer has already been given for kendo UI, but here is how it's implemented for kendo MVC:

.Scrollable(scr => scr.Height(400))

It will give you a vertical scroll bar, allowing the user to scroll through the data while constantly seeing both the header and footer of the table. You can read more about it here: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview.

Trouble with this solution, however, is that the grid will be 400px tall, even when there is only one row of data. You can solve this like so

.Scrollable(scr =>
{
    if (data.Count() < 10)
    {
        scr.Height("auto");
    }
    else
    {
        scr.Height(400);
    }
})