Chiều rộng cột lưới Kendo + Có thể cuộn

Question

Tôi đang cố gắng liên kết với lưới kendo có thể cuộn từ javascript và gặp một số vấn đề với chiều rộng cột. Điều này fiddle chứng minh vấn đề (mã ở cuối câu hỏi). Tôi đang chỉ định tiêu đề trong html và thêm chiều rộng vào một trong các tiêu đề. Sau đó, javascript sẽ đặt dataSource (trong mã sản xuất, điều này được thực hiện thông qua cuộc gọi ajax).

Tôi muốn tránh phải thiết lập thuộc tính columns.width trong javascript vì

• Tôi có nhiều lưới đó, kể từ viewmodels của tôi được xây dựng một cách cẩn thận có thể tự động phân biệt các cột cần thiết. Chúng tôi có hơn 100 gird trong ứng dụng của chúng tôi và phải xác định danh sách cột cho tất cả chúng sẽ khó sử dụng.
• Dù sao cũng sai, đây là thông tin tạo kiểu.

Tôi hiểu rằng chức năng này là do kendo tạo hai lưới, một cho tiêu đề và một cho nội dung cuộn. Tuy nhiên, các libs điều khiển khác mà tôi đã sử dụng trong quá khứ làm những việc tương tự luôn sao chép thông tin kiểu dáng giữa hai lưới để tạo kiểu dáng trong khi vẫn giữ hai bảng đồng bộ - tôi không chắc chắn về "kendo" cách này là.

HTML từ fiddle

<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

Dưới đây là khá thẳng về phía trước với lưới thanh cuộn ngang (bỏ qua ảo hóa) http://demos.kendoui.com/web/grid/virtualization-remote-data.html. Có chiều rộng trên mạng lưới của bạn hoặc đó là cha mẹ và chiều rộng cho mỗi cột với số tiền của họ so với chiều rộng lưới điện thực tế sau đó bạn sẽ có được thanh cuộn của bạn:

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

Đã trả lời ngày hôm qua trong bài viết khác của bạn: Column lines are not in sync in a Kendo grid

Hoặc

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

Note tôi đang sử dụng phiên bản mới hơn chút kendo và jQuery thì bạn làm.

Answer 2

Một tùy chọn khác là sử dụng các thành phần <colgroup/> và <col/> với thuộc tính kiểu/lớp.