如何隐藏网格标题kendo ui？

Question

我正在使用层次化网格kendo ui。我想隐藏网格标题。目前，我使用下面的代码，但是，只隐藏标题的文本。

// kendo ui grid
.TableHtmlAttributes(new { @class = "GridNoHeader" })

// css
.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
}

如果可以的话，请分享你的经验。谢谢

Answer 1

要隐藏网格标题，请使用如下代码：

.GridNoHeader .k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;
}

Answer 2

这是一个jQuery方式，你可以在网格初始化后立即运行：

$("#grid .k-grid-header").css('display', 'none');

它隐藏了整个标题，并且比css解决方案稍好一些，因为它将样式作为内联样式直接应用于标题，这意味着该样式自动具有比所有其他kendo样式更高的优先级。

对于您当前的方式，它只隐藏文本，因为visibility:hidden将隐藏元素，但仍会为其分配空间。尝试使用display:none。此外，k-grid-header类应用于包含整个头部的div元素，而不是应用于thead。也许你可以试试这个：

.GridNoHeader div.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    display: none;
    overflow: hidden;
}

Answer 3

就我的例子而言，解决方案"display: none;“中缺少一个样式属性。

此示例保留一个没有标题列名称的空标题行：

.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;
}

这将完全删除标题行：

.GridNoHeader thead.k-grid-header
{
    height: 0;
    border-bottom-width: 0;
    visibility: hidden;
    overflow: hidden;
    display: none;
}