Как скрыть заголовок сетки kendo ui?

Question

Я работаю с сеткой иерархии кендо 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, потому что он применяет стиль непосредственно к заголовку как встроенный стиль, что означает, что стиль автоматически имеет более высокий приоритет над всеми другими стилями кендо.

---

Что касается вашего текущего пути, он скрывает только текст, потому что 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

В моем случае в решении отсутствует 1 атрибут стиля "display: none;"

Этот пример оставляет пустую строку заголовка без имен столбцов заголовка:

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

This Removes the header row entirely:

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