How to freeze table header without Scrollable?

[Anderson Luiz]

I have a table, that I need to freeze the header.

Is there a option to freeze the header, without set Scrollable?

When I set the Scrollable, the header begin freeze. But, after this, when I group any column, the width of the rows change.

[Boyan Dimitrov]

Hello Anderson Luiz,

When the Kendo Grid scrollable option is disabled the vertical scroll disappears. The grid container elements increases its height in order to hold the rows for the current page. 

In case there is no scrollbar the header freezing does not make sense, since there is nothing to be scrolled. 

Regards,
Boyan Dimitrov
Telerik

[Keith]

I came across this post and am having the same issue. Here is an example in jquery https://docs.telerik.com/kendo-ui/knowledge-base/fixed-headers-grid

I like the original poster would like to do something similar. Is this possible in MVC? I tried mimicking the onDataload, style and javascript in the example however doing so messes with the column widths. Any Advice? 

[Tsvetomir]

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