Siatka Kendo, przewijanie w poziomie i wymiarowanie kolumn

Question

Domyślnie siatki kendo zostaną rozwinięte w celu wypełnienia ich zawierającego element div. To po prostu element tabeli, więc z natury.

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

Jednak po dodaniu kolejnych kolczyków (lub ich zbyt wielu) przeskalowują one do przodu i do tyłu. Chciałem poziomych pasków przewijania na przepełnieniu.

W tym celu dodałem kod uruchamiany przy uruchamianiu, dodawaniu i ponownym porządkowaniu.

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'); 
    }; 

Jednak wydaje się, że Kendo ma swoją własną logikę, która uderza w to. Pozycje grupy zostaną usunięte, wszystko zepsute.

Czy jest coś, co mogę zrobić, aby temu zapobiec? Czy istnieje lepszy sposób robienia tego, co chcę?

Dzięki.

Answer 1

mam pojemnik na stole jako:

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

i zastosowano następujące style:

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

, gdzie można zobaczyć, że zmuszam szerokości do 400 pikseli i ukryć (i przewijania) co przepełnia.

Potem zdefiniować następujące 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"); 

uzyskać taki efekt, że siatka przelewa poziomo rozmiar jego pojemnika.

Zobacz uruchomiony here

UWAGA Co to jest nawet miłe jest to, że paging pobyty jako 400px sylwetkę zawsze w widocznym miejscu, a siatka jest rzeczywiście 100 + 200 + 300 = 600 (the width z columns)

EDYCJA: Jeśli chcesz, aby width z grid było takie samo z sumą columns, powinieneś dodać (po zainicjowaniu siatki).

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'); 

Pętla oblicza całkowitą szerokość, a następnie ustawiam w niej tabelę (nie trzeba zmieniać kolumn, ponieważ są one poprawne).

Set to here

Answer 2

Musisz tylko upewnić się, że siatka jest przewijane i ustawić szerokość elementu, z którego stworzenia sieci.

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

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

Here jest w akcji.