Hi Keith,
The same exact approach should be applicable for the ASP.NET MVC widgets. The changes needed to make the sample in the ASP.NET MVC framework is the following:
.Events(ev=>ev.DataBound("onDataBound"))
The event handler should remain the same:
function onDataBound() {
var wrapper = this.wrapper,
header = wrapper.find(".k-grid-header");
function resizeFixed() {
var paddingRight = parseInt(header.css("padding-right"));
header.css("width", wrapper.width() - paddingRight);
}
function scrollFixed() {
var offset = $(this).scrollTop(),
tableOffsetTop = wrapper.offset().top,
tableOffsetBottom = tableOffsetTop + wrapper.height() - header.height();
if(offset < tableOffsetTop || offset > tableOffsetBottom) {
header.removeClass("fixed-header");
} else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && !header.hasClass("fixed")) {
header.addClass("fixed-header");
}
}
resizeFixed();
$(window).resize(resizeFixed);
$(window).scroll(scrollFixed);
}
And the only needed style is the following one:
<style>
.fixed-header {
top:0;
position:fixed;
width:auto;
z-index: 1;
}
</style>
Is it possible for you to provide a sample project in which the column widths are not properly calculated? I will be happy to investigate the case locally and get back to you with the respective suggestions.
Regards,
Tsvetomir
Progress Telerik