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

这是一种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 2

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

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

Answer 3

对于我的情况，解决方案中缺少1个样式属性＆＃34; display：none;＆＃34;

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

.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;
}

如何隐藏网格标题kendo ui？

3 个答案: