This is a migrated thread and some comments may be shown as answers.
Fixed Toolbar Grid & Fixed Headers Grid with Sticky Columns
7 Answers 13 Views
This is a migrated thread and some comments may be shown as answers.
Sotiris
Top achievements
Rank 1
Veteran
Iron
Sotiris asked on 14 Apr 2021, 08:38 AM

Hello all,

Following the guidelines https://docs.telerik.com/kendo-ui/knowledge-base/fixed-headers-grid, I managed to create a stuck headers grid.
Nevertheless, I have the following two open points that are related with this.

  • How could we make both headers of columns and custom toolbar fixed?
  • In my scenario, I have set the first column as Sticky.
    Because of this the header of the first columns misses its alignment with the rest header columns.
    Please check Capture2 to get the picture of this.
    Changing Sticky to Lock, the issue is resolved but I would like to keep the first column Sticky because I want the scrollbar-x starting from the first column of my grid. Thus I am searching for a workaround to keep the first column sticky and also keep all columns aligned regardless of sticky setting. 

Best regards,

Sotiris

7 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 16 Apr 2021, 12:06 PM

Hello Sotiris,

I prepared a small DOjo demo demonstrating fixed header and toolbar including a sticky first column:

This includes the following JS and CSS:

      function onDataBound() {
        var wrapper = this.wrapper,
            header = wrapper.find(".k-grid-header");
        		var toolbar = wrapper.find(".k-grid-toolbar");

        function resizeFixed() {
          var paddingRight = parseInt(header.css("padding-right"));
          console.log(paddingRight)
          header.css("width", wrapper.width() - paddingRight);
          toolbar.css("width", wrapper.width());
        }

        function scrollFixed() {
          console.log(1)
          var offset = $(this).scrollTop(),
              tableOffsetTop = wrapper.offset().top,
              tableOffsetBottom = tableOffsetTop + wrapper.height() - header.height();
          if(offset < tableOffsetTop || offset > tableOffsetBottom) {
            header.removeClass("fixed-header");
            toolbar.removeClass("fixed-toolbar");
          } else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && !header.hasClass("fixed")) {
            header.addClass("fixed-header");
            toolbar.addClass("fixed-toolbar");
          }
          kendo.resize($("#products"));
        }

        resizeFixed();
        $(window).resize(resizeFixed);
        $(window).scroll(scrollFixed);
      }

    <style>
      .fixed-header {
        top: 65px;
        position:fixed;
        width:auto;
        z-index: 1;
      }
      .fixed-toolbar {
        top: 0;
        position:fixed;
        width:auto;
        z-index: 1;
        padding: 8.4px
      }
      .k-grid-header .k-header.k-grid-header-sticky {
        position: relative;
        z-index: 0
      }
      
      .k-grid-content-sticky {
        z-index: 0
      }
</script>

Please examine this and let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Sotiris
Top achievements
Rank 1
Veteran
Iron
answered on 16 Apr 2021, 02:50 PM

Hello Nikolay,

Thank you very much for the really constructive feedback. It is very helpful and I feel it is in the right direction. 
However, I see some issues that are illustrated in the attached pictures.

  • In the pictures Capture4 and Capture5, I have button(s) and checkbox(es) that are displayed on top of the sticky column.
  • In the picture Capture6, I have a hole in right part of the header that is displayed when I switch to mobile view.

    Could you please advice?

    Best regards,
    Sotiris



      
0
Nikolay
Telerik team
answered on 21 Apr 2021, 01:04 PM

Hi Sotiris,

Are the checkboxes a Checkbox selection enabled functionality? I modified to Dojo adding this and I do not see any issue:

Regading the second question, to have the sticky columns working as expected and the Grid layout adjusts correctly there are some configurations that need to be set mentioned in the following article:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/columns/sticky-columns#sticky-columns

In the current case I think setting a Grid height will fix the problem:

I ho[e this helps.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Sotiris
Top achievements
Rank 1
Veteran
Iron
answered on 21 Apr 2021, 02:02 PM

Hello Nikolay,

Regarding the checkbox, no it does not have selection enabled functionality.
Namely it is a bool property for which a client template is used as the one in picture attached.
In my previous comment, I also refer to the case of a button that is implemented with a client template as well.

Regarding the second part in your guidelines, I am not sure that the problem is related to Grid height because
all the cells of the sticky column behave as sticky except for the header cell.
To be honest, I think the problem is related to some overlapping because of z-index property.
Moreover, I want to avoid fixed height if possible.

What about the issue that is observed in a mobile device at the right part of header row (please check Capture 6) from my previous message?   

Best regards,
Sotiris

 

 

 

0
Nikolay
Telerik team
answered on 26 Apr 2021, 11:35 AM

Hi Sotiris,

I added a template to the boolean column to test this from myself. Here is the result:

https://dojo.telerik.com/ixOPagEs/5

As far as I can see it is working correctly.

Regariding the Grid height is required and not having such may lead to side effects like the one you are describing. If you want I can investigate further, but for this, I will ask you to send me a small runnable page that clearly replicates and isolates the problem. Having this will help me fully understand the case and allow me to advise further.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Sotiris
Top achievements
Rank 1
Veteran
Iron
answered on 26 Apr 2021, 11:52 AM

Hi Nikolay,

Please check the attached screenshot. Changing the configuration of columns as in picture I still see the problem.

Best regards,
Sotiris  

Nikolay
Telerik team
commented on 29 Apr 2021, 09:59 AM

Hi Sotiris,

I just modified the Dojo as per the suggested columns configuration but the result here is different:

https://dojo.telerik.com/ixOPagEs/8

I tested in Firefox and Edge as well and it seems to be the same. Can you please modify the Dojo directly?

 

 

0
Sotiris
Top achievements
Rank 1
Veteran
Iron
answered on 29 Apr 2021, 01:00 PM

Hi Nikolay,

I see that you wrongly updated it .
Please check again with changing 'stickly' to 'sticky'.

Best regards,

Sotiris

Nikolay
Telerik team
commented on 04 May 2021, 07:52 AM

Hi Sotiris,

Thank you for pointing out this typo I made.

I see the problem now and I will investigate. Please expect another reply.

Regards,

Nikolay

Tags
Grid
Asked by
Sotiris
Top achievements
Rank 1
Veteran
Iron
Answers by
Nikolay
Telerik team
Sotiris
Top achievements
Rank 1
Veteran
Iron
Share this question
or