I was able to keep the headers aligned with their columns by checking the headers length against the columns length in the open event function and inserting a new header at the end of the header row when needed:
open:
function
(e) {
/* if the scrollable area overflows and the vertical
* scrollbar is visible the headers will be misaligned
* with their columns */
var
itemsCount = $(
this
.list[0]).find(
'.k-item'
).length;
/* due to the set height value, I know that if the
* grid contains more than 5 items the scrollable
* area will overflow */
if
(itemsCount > 5) {
var
headers = $(
this
.columnsHeader[0]).find(
'th'
);
/* insert extra <th> element at end of header
* row to align headers with their columns,
* if not already done */
if
(headers.length <
this
.options.columns.length + 1) {
$(
'<th>'
).insertAfter(headers.last());
}
}
}
I've attached a screenshot of the result.