I can figure out how to fix this and make it span the whole grid with some Javascript / jQuery, but maybe it's an easier fix. Maybe I'm doing something wrong.
Image attached and I created a JSFiddle here:
http://jsfiddle.net/dmathisen/gFwtm/
Image here if it doesn't attach: http://i.imgur.com/7ZXYsmu.png
9 Answers, 1 is accepted


http://jsfiddle.net/dmathisen/gFwtm/1/
The observed issue is caused by an incorrect column width configuration (i.e. a missing column width). Please refer to the documentation:
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#frozen-columns-(locked-columns)
You can also notice that there is one header cell missing, which is again caused by the missing column width. The proposed workaround does not resolve this problem.
Regards,
Dimo
Telerik

Errors have been fixed and the issue still exists. The workaround is working.
Without workaround: http://jsfiddle.net/dmathisen/gFwtm/2/
With workaround: http://jsfiddle.net/dmathisen/gFwtm/3/
The sum of all column widths is less than the Grid width. Such a configuration is generally not supported (see below) and moreover, it doesn't make sense in the context of frozen columns, because frozen columns are useful when there is horizontal scrolling, i.e. when the sum of all column widths exceeds the Grid width.
http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths
Regards,
Dimo
Telerik

Right. But when the width is less than the container and there is no scrolling, why create that ugly whitespace when you can just fill the entire witdth, as seen in my second example? It looks much nicer to fill the entire table. Maybe that's just me.
Anyway, thanks for the input and explanation.
Removing the whitespace would require one of the following:
1) changing the Grid configuration on the fly and "making up" new column widths, which are different from the set ones.
2) expanding the table with the existing column widths, which will lead to undesired jumping and flickering during column resizing.
We would like to refrain from doing any of the above.
Regards,
Dimo
Telerik

I'm seeing the same thing. Without my locked column, the grid behaves just as I would want with horizontal scrolling when the window becomes too narrow and columns automatically expanding when the window is wider than the total of specified column widths.
But when I add the Locked(True) on the first column, not only do I get white space to the right of the columns, but I also get two javascript errors (in kendo.web.min.js) every time the page loads. As far as I can see, I have every column width defines as it says in the documentation. I do have a column group as well. Each of the three columns in that group has it's Width defined.
Here is the grid definition (sorry for the VB)
@(Html.Kendo().Grid(Of ViewModels.CatLocationSummaryVM)() _
.Name(
"loc_grid"
) _
.Columns(
Sub
(columns)
columns.Bound(
Function
(c) c.IndexRecord).Width(120).Locked(
True
)
columns.Bound(
Function
(c) c.AccountNumber).Width(90)
columns.Bound(
Function
(c) c.AccountName).Width(200)
columns.Bound(
Function
(c) c.City).Width(130)
columns.Bound(
Function
(c) c.State).Width(90)
columns.Bound(
Function
(c) c.Country).Width(100)
columns.Bound(
Function
(c) c.AssignedTo).Width(125)
columns.Bound(
Function
(c) c.CanvasPriority).Width(95)
columns.Bound(
Function
(c) c.LastChangedBy).Width(120)
columns.Group(
Sub
(g)
g.Title(
"Status"
) _
.Columns(
Sub
(info)
info.Bound(
Function
(c) c.PreCanvasCode).Width(80)
info.Bound(
Function
(c) c.PostCanvasCode).Width(85)
info.Bound(
Function
(c) c.ImpairmentCode).Width(95)
End
Sub
)
End
Sub
)
End
Sub
) _
.Sortable() _
.Scrollable(
Sub
(s) s.Height(500)) _
.Filterable() _
.DataSource(
Sub
(d)
d.Ajax() _
.Read(
Function
(read) read.Action(
"LocationsRead"
,
"Catastrophe"
,
New
With
{.catId = Model.CatastropheId})) _
.Model(
Sub
(m) m.Id(
Function
(c) c.CatLocationId))
End
Sub
))
And the javascript error happens on this line (starting with n[0])
this.lockedHeader.add(this.lockedContent).width(l),n[0].style.width=n.parent().width()-l-2+"px"
When frozen columns are used, the Grid renders a few additional <table>s and <div>s, and applies the sum of the configured non-frozen columns' widths as a width to the <div>, which wraps them. As a result, you are seeing different behavior, compared to the case when there are no frozen columns.
Your options to avoid seeing white-space inside the Grid are:
- use a small-enough width for the Grid
- use larger column widths
The Grid width and/or appropriate column widths can even be set, according to the user's screen resolution.
Regards,
Dimo
Telerik