Fixed Toolbar Grid & Fixed Headers Grid with Sticky Columns

[Sotiris]

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

[Nikolay]

Hello Sotiris,

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

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

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

[Sotiris]

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
  
  
  
    

[Nikolay]

Hi Sotiris,

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

• https://dojo.telerik.com/ixOPagEs/2

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:

• https://dojo.telerik.com/ixOPagEs/2

I ho[e this helps.

Regards,
Nikolay
Progress Telerik

[Sotiris]

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

 

 

 

[Nikolay]

Hi Sotiris,

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

• https://www.screencast.com/t/qEhxRRO7

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

[Sotiris]

Hi Nikolay,

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

Best regards,
Sotiris  

[Nikolay]

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?

 

 

[Sotiris]

Hi Nikolay,

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

Best regards,

Sotiris

[Nikolay]

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