Kendo Grid Column Width + Scrollable

Question

I'm trying to bind to a scrollable kendo grid from javascript and having a few issues with column widths. This fiddle demonstrates the issue (code at the end of the question). I'm specifying the headers in the html and adding a width to one of the headers. The javascript then sets the dataSource (in production code this is done via an ajax call).

I want to avoid having to set the columns.width property in the javascript because

I have many grids that, since my viewmodels are carefully constructed are able to automatically discern the columns required. We have over 100 girds in our app and having to specify the column list for all of them would be unwieldy.
It feels wrong anyway, this is styling information.

I do understand that the functionality is due to kendo creating two grids, one for the headers and one for the scrolling content. However, other control libs I have used in the past that do similar things have always copied the styling information between the two grids in order to facilitate declarative styling while keeping the two tables in sync - I'm just not sure what the "kendo" way for this is.

HTML from 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%;
}

Vojtiik Vojtiik · Accepted Answer · 2013-07-09T08:31:18

Here is quite straight forward grid with horizontal scrollbar (ignore the virtualization) http://demos.kendoui.com/web/grid/virtualization-remote-data.html. Have a width on your grid or it's parent and width for each column with their sum over the actual grid width then you get your scrollbar:

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

Already answer yesterday in your other post : Column lines are not in sync in a Kendo grid

Or

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

Note I am using bit newer version of kendo and jQuery then you do.

Kendo Grid Column Width + Scrollable

2 Answers