Come nascondere l'intestazione di griglia kendo ui?

Question

Sto lavorando con la gerarchia grid kendo ui. Voglio nascondere l'intestazione della griglia. Attualmente, io uso il codice come di seguito, tuttavia, solo nascondere il testo dell'intestazione.

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

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

Si prega di condividere la vostra esperienza se è possibile. Grazie

Answer 1

Per nascondere intestazione della griglia, si prega di utilizzare il codice come di seguito:

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

Answer 2

Ecco un modo jQuery che è possibile eseguire subito dopo la griglia è stato inizializzato:

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

Nasconde l'intera intestazione, ed è leggermente migliore rispetto alla soluzione css perché si applica direttamente lo stile all'intestazione come stile in linea, il che significa che lo stile ha automaticamente una priorità più alta rispetto a tutti gli altri stili di kendo.

---

Per quanto riguarda il vostro modo attuale, si nasconde solo il testo a causa visibility:hidden sarà nascondere l'elemento, ma lo spazio è ancora stanziati per essa. Prova con display:none. Inoltre, la classe k-grid-header viene applicata all'elemento div che contiene l'intera intestazione, non su thead. Forse provare questo:

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

Answer 3

Per il mio caso, v'è 1 attributo style manca dalla soluzione "display: none;"

Questo esempio lascia una riga di intestazione vuota senza nomi colonna intestazione:

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

Ciò elimina la riga di intestazione del tutto:

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