Kendo Grid Column Width + Scrollable

Question

Próbuję powiązać przewijaną siatkę kendo z javascript i mieć kilka problemów z szerokościami kolumn. Ta fiddle pokazuje problem (kod na końcu pytania). Podam nagłówki w html i dodam szerokość do jednego z nagłówków. Następnie javascript ustawia źródło danych (w kodzie produkcyjnym odbywa się to przez wywołanie ajax).

chcę uniknąć konieczności ustawić właściwość columns.width w javascript, ponieważ

• Mam wiele siatek, że skoro moi ViewModels są starannie skonstruowane są w stanie automatycznie rozpoznać kolumny wymagane. W naszej aplikacji mamy ponad 100 girdów, a określenie listy kolumn dla wszystkich z nich byłoby nieporęczne.
• Czuje się źle, tak, to jest informacja o stylizacji.

Rozumiem, że funkcjonalność wynika z tego, że kendo tworzy dwie siatki, jedną dla nagłówków i jedną dla przewijanej treści. Jednak inne biblioteki kontrolne, z których korzystałem w przeszłości, które robią podobne rzeczy, zawsze kopiowały informacje o stylizacji między dwiema siatkami, aby ułatwić deklaratywne stylizacje przy jednoczesnym zachowaniu synchronizacji dwóch tabel - po prostu nie jestem pewien, co to jest "kendo" droga do tego jest.

HTML z skrzypce

<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

Tutaj jest dość prosta siatka z poziomego paska przewijania (ignorować wirtualizacji) http://demos.kendoui.com/web/grid/virtualization-remote-data.html. Mają szerokość na siatce lub jego rodzic i szerokość każdej kolumny z ich sumy na rzeczywistej szerokości siatki wtedy uzyskać przewijania:

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

Już odpowiedzieć wczoraj w innym poście: Column lines are not in sync in a Kendo grid

Or

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

Uwaga używam nieco nowszą wersję kendo i jQuery następnie zrobić.

Answer 2

Inną opcją jest użycie elementów <colgroup/> i <col/> z właściwościami stylu/klasy.