How to freeze table header without Scrollable?

4 posts, 0 answers
  1. Anderson Luiz
    Anderson Luiz avatar
    1 posts
    Member since:
    Apr 2015

    Posted 11 May 2015 Link to this post

    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.

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 13 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Keith
    Keith avatar
    1 posts
    Member since:
    Sep 2018

    Posted 26 Feb 2020 in reply to Boyan Dimitrov Link to this post

    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? 

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 28 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top