Larghezza colonna griglia Kendo + Scrollabile

Question

Sto provando a collegarmi a una griglia di kendo scorrevole da javascript e con alcuni problemi con le larghezze delle colonne. Questo fiddle dimostra il problema (codice alla fine della domanda). Sto specificando le intestazioni nel codice HTML e aggiungendo una larghezza a una delle intestazioni. Javascript imposta quindi dataSource (nel codice di produzione ciò avviene tramite una chiamata ajax).

Voglio evitare di dover impostare la proprietà columns.width in javascript perché

• Ho molti griglie che, dal momento che i miei ViewModels sono accuratamente costruite sono in grado di discernere automaticamente le colonne necessarie. Abbiamo oltre 100 gird nella nostra app e dover specificare l'elenco di colonne per tutti loro sarebbe poco maneggevole.
• Ci si sente comunque in errore, si tratta di informazioni sullo stile.

Capisco che la funzionalità è dovuta al kendo che crea due griglie, una per le intestazioni e una per il contenuto a scorrimento. Tuttavia, altre librerie di controllo che ho usato in passato che fanno cose simili hanno sempre copiato le informazioni di stile tra le due griglie per facilitare lo stile dichiarativo mantenendo le due tabelle sincronizzate - non sono sicuro di cosa sia il "kendo" modo per questo è.

HTML dal violino

<table> 
    <thead> 
     <th class="p20" data-field="status">Status</th> 
     <th data-field="description">Description</th> 
    </thead> 
</table> 

Javascript

$('table').kendoGrid({ 
    dataSource: [ 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' }, 
     { status: 'On', description: 'a longer description' } 
    ], 
    scrollable: true 
}); 

CSS

.k-grid-content { 
    height: 100px; 
} 
.p20 { 
    width: 20%; 
} 

Answer 1

qui è abbastanza rettilineo in avanti con barra di scorrimento orizzontale (ignorare la virtualizzazione) http://demos.kendoui.com/web/grid/virtualization-remote-data.html. Avere una larghezza sulla griglia o è genitore e larghezza per ogni colonna con la loro somma sopra la larghezza effettiva della griglia, allora si ottiene la barra di scorrimento:

{ field: "OrderID", title: "Order ID", width: 60 }, 

rispondere Già ieri nel post di altri: Column lines are not in sync in a Kendo grid

Or

http://jsfiddle.net/vojtiik/2ApvC/3/

Nota sto usando la versione più recente di kendo po 'e poi si jQuery fare.

Answer 2

Un'altra opzione è utilizzare gli elementi <colgroup/> e <col/> con proprietà stile/classe.