2013-01-16 48 views
8

Per impostazione predefinita, le griglie kendo si espandono per riempire il loro div contenente. È solo un elemento da tavolo, quindi per sua natura.Kendo Grid, scrolling orizzontale e ridimensionamento colonna

<table role="grid"> 
<colgroup> 
<col style="width:200px"> // etc 
<colgroup> 
<thread> 
// content 
</thread> 
</table> 

Tuttavia quando si aggiungono altri colli (o aveva troppe), che scala avanti e indietro per adattarsi. Volevo barre di scorrimento orizzontali su overflow.

Per fare ciò, ho aggiunto del codice che è stato eseguito all'avvio, aggiunto e riordinato.

this._initWidths = function() { 
    var totalWidth = 0; 
    for (var i = 0; i < grid.columns.length; i++) { 
     var width = grid.columns[i].width; 
     $('#myGrid .k-grid-header-wrap colgroup col').eq(i).css('width', width + 'px'); 
     $('#myGrid .k-grid-content colgroup col').eq(i).css('width', width + 'px'); 
     totalWidth = totalWidth + width; 
    } 
    table.css('width', totalWidth + 'px'); 
    }; 

Tuttavia il Kendo sembra avere una propria logica che si oppone a questo. Le voci di Colgroup inizieranno ad essere cancellate, rovinando tutto.

C'è qualcosa che posso fare per fermare questo? C'è un modo migliore per fare ciò che voglio?

Grazie.

risposta

8

Ho un contenitore per la tavola come:

<div id="myWindow"> 
    <div id="myGrid"></div> 
</div> 

e applicati i seguenti stili:

#myWindow { 
    width: 400px; 
    overflow-x: scroll; 
} 

dove si può vedere che forzo la larghezza di 400px e nascondere (e scorrere) cosa trabocca.

Poi definire quanto segue grid:

var grid = $("#myGrid").kendoGrid({ 
    dataSource : { 
     data : entries, 
     schema : { 
      model: { 
       id: "city" 
      } 
     }, 
     pageSize: 5 
    }, 
    columns : [ 
     { field: "city", title: "City", width: 100 }, 
     { field: "time", title: "Time", format: "{0:HH:mm}", width: 200}, 
     { field: "datetime", title: "Date - Time", format: "{0:yyyy-MM-dd HH:mm}", width: 300 } 
    ], 
    sortable : { 
     mode  : "single", 
     allowUnsort: false, 
     field  : "city" 
    }, 
    editable : "popup", 
    navigatable: true, 
    pageable : true 
}).data("kendoGrid"); 

ottengo l'effetto che la griglia trabocca orizzontalmente la dimensione del suo contenitore.

vedere in esecuzione here

NOTA Quello che è ancora più bella è che paging rimane come 400px raccordo sempre nella zona visibile, mentre la griglia è in realtà 100 + 200 + 300 = 600 (la width del columns)

MODIFICA: Se si desidera che lo width dello grid sia lo stesso della somma dello columns, è necessario aggiungere (dopo l'inizializzazione della griglia).

var totalWidth = 0; 
for (var i = 0; i < grid.columns.length; i++) { 
    var width = grid.columns[i].width; 
    totalWidth = totalWidth + width; 
} 
grid.element.css('width', totalWidth + 'px'); 

Il ciclo calcola la larghezza totale e poi impostare la tabella di esso (non è necessario modificare le colonne poiché sono corrette).

Set è here

+0

Ok, grazie, questo è metà di quello che volevo. Come posso evitare che il kendo si espanda per riempire lo spazio se le larghezze delle colonne sono molto brevi? Supponiamo che tu abbia lasciato Time a 50 e datetime a 100. Kendo li espanderebbe. Come posso smettere? Grazie ancora. – Tim

+0

Per favore, vedi ** EDIT ** fondamentalmente è quello che stavi facendo nel tuo ciclo 'for', ma un po 'semplificato. – OnaBai

+0

Fammi sapere se non ha funzionato! – OnaBai

9

Hai solo bisogno di garantire la griglia è scorrevole e impostare la larghezza dell'elemento da cui si crea la griglia.

<div id="myGrid" style='width:500px;'></div> 

var grid = $("#myGrid").kendoGrid({ 
    scrollable:true, 
    //... 
}) 

Here è in azione.

+2

Non è 'true' il valore predefinito per' scrollable'? Perché l'hai incluso come parte della risposta? Nella tua risposta l'unica cosa importante è definire la larghezza del div che contiene la tabella. – OnaBai

+1

@OnaBai Una rapida occhiata ai documenti di Kendo fornisce un'abbondanza di questo avviso riguardo a "scrollable": "di default, ad eccezione del wrapper MVC del widget". Questo è un buon promemoria per non sempre dipendere dalle impostazioni predefinite e, qual è il danno nell'impostare questo esplicitamente nella risposta comunque? – ProfK

+2

@ProfK, il mio commento è stato perché l'inizializzazione di qualcosa sui valori predefiniti non dovrebbe risolvere il problema. Se il problema viene risolto è in realtà perché qualcos'altro. In questo caso, ciò che risolveva il problema era usare un "div" per contenere la griglia qualcosa che la mia risposta precedente (nel tempo) già includeva. – OnaBai

Problemi correlati