So verstecken Sie den Grid-Header kendo ui?

Question

Ich arbeite mit Hierarchie-Raster kendo ui. Ich möchte den Grid-Header ausblenden. Momentan benutze ich den Code wie unten, verstecke aber nur den Text des Headers.

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

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

Bitte teilen Sie Ihre Erfahrungen, wenn Sie können. Dank

Answer 1

Rasterheader auszublenden, bitte, wie Sie den Code unten verwenden:

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

Answer 2

Hier ist eine jQuery Art und Weise, die Sie sofort ausgeführt werden können, nachdem das Netz initialisiert wurde:

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

Es verbirgt ich die ganzen Header und ist etwas besser als die CSS-Lösung, weil sie den Stil direkt gilt in der Kopfzeile als Inline-Stil, was bedeutet, dass der Stil automatisch Vorrang vor allen anderen Kendo-Stilen hat.

---

Ihre aktuelle Art und Weise angeht, versteckt sie nur den Text, weil visibility:hidden das Element verstecken, aber noch Platz für sie zugeordnet ist. Versuchen Sie es mit display:none. Außerdem wird die k-grid-header Klasse auf das div Element angewendet, das den gesamten Header enthält, nicht auf thead. Vielleicht versuchen:

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

Answer 3

Für meinen Fall gibt es 1 style-Attribut aus der Lösung fehlt "display: none;"

Dieses Beispiel lässt eine leere Kopfzeile ohne Namen Kopfspalte:

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

Diese Zeilenkopf Entfernt vollständig:

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