Come aumentare la larghezza della colonna Griglia Kendo automatica

Question

Ho usato i datatables del plugin jQuery, che consentiranno l'ingrandimento automatico delle colonne per recuperare il titolo o la lunghezza del contenuto dei dati se non specificiamo la larghezza della colonna della griglia.

Ora voglio la stessa funzione in Kendo griglia, tuttavia, non riesco a trovare, tranne fare lo stile involucro griglia fissa e impostare un css larghezza Col per tutte le colonne, che rendono il piccolo campo di lunghezza anche assumono grande spazio.

Quindi la mia domanda è come rendere la colonna Kendo griglia (di solito ho molti campi, ed è in grado di scorrimento) larghezza automatica o di lunghezza diversa (e non mi aspetto di impostare la larghezza per ogni colonna manualmente) .

Grazie

Answer 1

Si tipo di necessario impostare la larghezza quando si definiscono le colonne, se non si specifica la larghezza poi ci vorrà l'auto-larghezza del contenuto. Date un'occhiata a questa Dochttp://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.width

columns: [ 
    { field: "name", width: "200px" }, 
    { field: "tel", width: "10%" }, // this will set width in % , good for responsive site 
    { field: "age" } // this will auto set the width of the content 
    ], 

Se avete bisogno di più modi per gestire la larghezza Kendo, guarda http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

Answer 2

Impostazione scorrevole su false dovrebbe fare il trucco:

$('#grid').kendoGrid({ 
    dataSource: { 
    data: data 
    }, 
    scrollable: false, 
    resizable: true 
}); 

Answer 3

Sono anche risolvere questo problema in angolare con dataBound:

il mio problema sulle colonne con adattamento automatico kendo in databound

 <kendo-grid id="grid" options="mainGridOptions"> 
     </kendo-grid> 



     dataBound: function(){ 
      var grid = $("#grid").data("kendoGrid"); 
      for (var i = 0; i < grid.columns.length; i++) { 
       grid.autoFitColumn(i); 
      } 
     }, 
     dataSource: $scope.data, 

è possibile farlo in jQuery:

$('#grid').kendoGrid({ 
    dataSource: { 
    data: data 
    },dataBound: function(){ 
      var grid = $("#grid").data("kendoGrid"); 
      for (var i = 0; i < grid.columns.length; i++) { 
       grid.autoFitColumn(i); 
      } 
     },