如何在Kendo MVC Grid中冻结列标题？

Question

我有kendo MVC Grid，我必须将页面大小设置为50，所以我需要在滚动时冻结列标题。

问题是：如何在滚动时冻结列标题？

Answer 1

创建网格时，您应该以像素为单位定义height，并将scrollable定义为true。

示例：

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

在此处查看此工作：http://jsfiddle.net/OnaBai/uuPW5/

Answer 2

也许这是你在寻找的东西：

https://github.com/jmosbech/StickyTableHeaders

效果很好，你的网格中不必有滚动条，这样可以更容易使用。

您只需将提供的脚本链接到您的视图，并在加载时调用此方法：

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

参数是可选的，但cacheHeaderHeight提高了性能，由于自定义网格标题边框和fixedOffset，我不得不添加leftOffset，因为其他粘性元素。

Answer 3

这个答案已经针对 kendo UI 给出，但这里是如何为 kendo MVC 实现的：

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

它会给你一个垂直滚动条，允许用户滚动数据，同时不断地看到表格的页眉和页脚。您可以在此处阅读更多相关信息：https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview。

然而，这个解决方案的问题在于，即使只有一行数据，网格也会有 400 像素高。你可以这样解决这个问题

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