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.