Jak zrobić Kendo Grid Kolumna auto Szerokość

Question

Użyłem jQuery wtyczki datatables, które będą automatycznie szerokość kolumn, aby pobrać tytuł lub długość zawartości danych, jeśli nie określamy szerokości kolumny siatki.

Teraz chcę mieć tę samą funkcję w Kendo Grid, jednak nie mogę jej znaleźć poza ustawieniem stylu siatki Grid i ustawieniem szerokości css dla wszystkich kolumn, które sprawiają, że pole o małej długości zajmuje również dużą przestrzeń.

Moje pytanie brzmi: jak utworzyć kolumnę Kendo Grid (zazwyczaj mam wiele pól i można ją przewijać) o szerokości automatycznej lub innej długości (i nie spodziewam się, że ręcznie ustawię szerokość dla każdej kolumny) .

Dzięki

Answer 1

Ty niby trzeba ustawić szerokość podczas definiowania kolumny, jeśli nie określić szerokość następnie zajmie auto szerokość zawartości. Spójrz w tym 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 
    ], 

Jeśli potrzebujesz więcej sposobów, aby obsłużyć szerokość Kendo, spojrzeć na http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

Answer 2

Ustawianie przewijania false powinno załatwić sprawę:

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

Answer 3

Problem ten rozwiązuję również w kanciarze z danymi:

mój problem o kendo kolumn z danymi w Aut.dop

 <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, 

można to zrobić w 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); 
      } 
     },